多种形式的Mutliple Onsubmit处理程序

Question

我正在编写一个JavaScript的螺栓固定，旨在在提交表单时捕获信息。我需要适应网页上可能有多个表单的方案，没有/某些/全部可能已经定义了Onsubmit处理程序。...我需要在调用螺栓固定代码后启动原始处理程序。

我已经有一个带有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仅具有函数范围，所以不块范围：

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

也可以看看 假人封闭, ，示例5

Answer 2

我认为问题可能是您的 origSubmit 多变的;它在您在此创建的函数上“封闭”，但已通过for循环更改。

尝试：

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 = createSubmitHandler(origSubmit);
            }
    }
}

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


function createSubmitHandler(origSubmit) 
{
  return function(event) {
    dosubmit(event);
    return origSubmit(event);
  }
}