javascript - 送信イベントでフォームがどのように送信されたかを取得する

Question

いくつかのボタンがあるフォームがあります。2つのボタンはajaxを使用してフォームを送信し、クリアして、ユーザーが次に進む前に複数のレコードを追加できるようにします。最後のボタンは、ユーザーがページを使い終えて次のページに移動したい場合に使用します。jQueryの.submit（）メソッドで、フォームがどのように送信されたかを知ることはできますか（Enterキーを押すか、ボタンのオブジェクトをクリックします）？

Answer 1

ベストプラクティスかどうかはわかりませんが、送信イベントハンドラーを作成し、その後、他のボタンのハンドラーを作成すると、少なくともChromeでは問題なく動作するように見えることがわかりました。

これが例です

$(function(){
    $('form#frmField').submit(function(evt){
        alert('Form Submitted');
        return false;
    });

    $('input#btnReset').click(function(){
        alert('Form Reset');
        return false;
    });
});

Answer 2

ボタンのonclickイベントハンドラーを定義して、状態をグローバルスコープ変数に保存できます。次に、onsubmitハンドラーで変数の状態を確認します。

http://jsfiddle.net/archatas/6dsFc/

Answer 3

jQueryイベントは、呼び出しを通じてイベントオブジェクトを渡します。このイベントオブジェクトを使用して、イベントがどのように呼び出されたかを判別できます。

具体的にeは、関数のパラメーターとして渡すと、をチェックできます。これは、、または、e.typeに等しい必要があります。これは、Enterキーを付けて送信された場合は13になります。clicke.which

を使用targetして、どのDOM要素が。で送信を開始したかを確認できますe.target。

それで、

jQuery('#foo').click(function(e){
var initiator = $(e.target); //jQuery object for the DOM element that initiated the submit
if(e.type==="click")
{
//is a click
}
else if(e.which==="13")
{
//is an 'enter' triggered submission
}
});

}）;

Answer 4

あなたはこの方法を試すことができます：

HTML：

<form id="myform">
    <input type="text" id="text1" name="text1" /><br />
    <input type="button" class="button-submit" id="b1" name="b1" value="send 1" /><br />
    <input type="button" class="button-submit" id="b2" name="b2" value="send 2" /><br />
    <button class="button-submit" id="b3">send 3</button>
</form>

<br />
<div id="data"></div>

JS：

$('#myform').bind('submit', function(event, from) {

    if(from)    
       $('#data').append("from :" + $(from).attr('id') + '<br />');

    return false;

});

$('#myform').keypress(function(event) {

  if (event.which == '13') {
     event.preventDefault(); //preventDefault doesn't stop further propagation of the event through the DOM. event.stopPropagation should be used for that.
     event.stopPropagation();
     $(this).trigger('submit', [this]); 
     return false; 
  }

});

$('.button-submit').bind('click', function(event) { 
    event.stopPropagation();
    $('#myform').trigger('submit', [this]); 
    return false; 
});

例
event.preventDefault