複数のフォーム用のMutliple OnSubmitハンドラー

Question

フォームが送信されたときに情報をキャプチャすることを目的としたJavaScriptのボルトオンビットを書いています。 Webページに複数のフォームがある可能性のあるシナリオを採用する必要があります。何/一部/すべてが既にHandlersを定義している可能性があります。

2つのフォームを備えたテストケースのセットアップがあります。1つ目には、OnSubmitハンドラーがなく、2つ目は単純なアラートボックスです。

以下のコードを試しましたが、既存のハンドラーを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);  
}

何か案は？

ティア

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