javascript - 多个表单的多个 onsubmit 处理程序

Question

我正在编写一段附加的 JavaScript，旨在在提交表单时捕获信息。我需要适应网页上可能有多个表单的情况，其中没有/部分/全部可能已经定义了 onsubmit 处理程序......并且我需要在调用 bolt 代码后触发原始处理程序。

我有一个包含 2 个表单的测试用例设置，第一个没有 onsubmit 处理程序，第二个是一个简单的警报框。

我尝试了下面的代码 - 但这似乎将预先存在的处理程序从 form2 复制到 form1:

window.onload=pageinit;

function pageinit()
{
    for (var x=0; x < document.forms.length; x++) {
            var origSubmit=document.forms[x].onsubmit;
            if (typeof origSubmit != 'function') {
                    document.forms[x].onsubmit=dosubmit;
            } else {
                    document.forms[x].onsubmit = function (event) {
                            dosubmit(event);
                            return origSubmit(event);
                    }
            }
    }
}

function dosubmit(ev)
{
  alert('bolt-on invoked from ' + ev.target.name);  
}

有什么想法吗？

TIA

Answer 1

我真的不明白你想要做什么，但你有典型的循环定义中的函数问题:

当调用任何 document.forms[x].onsubmit 函数时(显然是在循环完成之后)，每个处理程序中的 origSubmit 将指向相同的函数(document.forms[document.forms.length - 1].onsubmit)。您必须“捕获”origSubmit 的值，因为 JavaScript 只有函数作用域，没有 block 作用域:

 for (var x=0; x < document.forms.length; x++) {
            var origSubmit=document.forms[x].onsubmit;
            if (typeof origSubmit != 'function') {
                    document.forms[x].onsubmit=dosubmit;
            } else {
                    document.forms[x].onsubmit = (function(func) {
                        return function (event) {
                                dosubmit(event);
                                return func(event);
                               }
                    }(origSumbit));
            }
    }

另请参阅Closures for Dummies ，示例5