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);

注意：IE＆lt; 9需要使用attachEvent代替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。

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

2 个答案: