0

我们的 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 页面中可以有多个这样的表单和操作。进行提交操作时，我需要在表单级别查找所有输入和操作值吗？

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

4

2 回答 2

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 小提琴演示。

以上是一种稍微过时的方法，更好的替代用途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 小提琴演示。

于 2012-08-27T06:50:05.950 回答
0

为表单分配一个 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<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 等通用框架库来避免所有这些，或者您可以定义一个好的addEvent函数。

于 2012-08-27T06:39:44.380 回答