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

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<9attachEventの代わりに使用する必要があります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 に答える