单击 SUBMIT 按钮时获取 FORM 中的所有 INPUT 和 ACTION 标签

Question

我们的 HTML 页面中有如下形式的标签：

<form method= POST action=https://mysite_1.com> 
<input type=hidden name=XXXX value=yyyyyy> 
<input type=hidden name=YYYY value=zzzzz>
<input type=submit name=NNNN value=aaaaa> 
</form>

<form method= POST action=https://mysite_2.com> 
<input type=hidden name=PPPP value=kkkkk> 
<input type=hidden name=MMMM value=lllll>
<input type=submit name=FFFF value=jjjjj> 
</form>

HTML 页面中可以有多个这样的表单和操作。进行提交操作时，我需要在表单级别查找所有输入和操作值吗？

我面临的问题是在页面的表单级别检测哪个“表单”的哪个“提交”按钮及其“操作”值？

Answer 1

一种方法是使用指定的表单提交处理函数，该函数可以从正在提交的任何元素中检索属性：

function submission(form, e){
    e = e || window.event;
    e.preventDefault();
    var formAction = form.action,
        formMethod = form.method;
    console.log(formAction, formMethod);
}

var forms = document.getElementsByTagName('form');

for (var i=0, len=forms.length; i<len; i++){
    forms[i].onsubmit = function(e){
        submission(this, e);
    };
}

JS Fiddle demo.

上面是一个稍微过时的方法，更好的选择使用addEventListener()（或attachEvent（IE），但没有IE测试我只能提供addEventListener()：

var forms = document.getElementsByTagName('form');

for (var i=0, len=forms.length; i<len; i++){
    forms[i].addEventListener('submit', function(e){
        submission(this, e);
    });
}

JS Fiddle demo.

Answer 2

为表单分配一个 id：

<form id="form1" method="POST" action="https://mysite_1.com"> 
...
</form>

<form id="form1" method="POST" action="https://mysite_2.com"> 
...
</form>

然后给它们附加一个事件监听器来捕获submit事件：

document.getElementById("form1").addEventListener("submit", function() {
    var inputs = this.elements;
    // Do something
}, false);
document.getElementById("form2").addEventListener("submit", function() {
    var inputs = this.elements, action = this.action;
    // Do something
}, false);

注意：IEattachEvent而不是addEventListener：

document.getElementById("form1").attachEvent("onsubmit", function() {
    var form = document.getElementById("form1").elements,
        inputs = form.elements, action = form.action;
    // Do something
});

而 this 关键字指的是无用的window 对象，所以你必须再次使用getElementById。您可以使用 jQuery、Prototype 或 Mootools 等通用框架库来避免所有这些，或者您可以定义 good addEvent function。