クリック後にフォームボタンを無効にする

Question

フォームが複数回送信されないようにするには、クリックした後にフォーム送信ボタンを無効にします。私はボタンを無効にし、それが無効に見せるクラスを追加するために、次のコードを使用します。

$("form button.primaryAction").click(function() { 
    $(this).prop("disabled", true).addClass('disabledBtn'); 
    return true; 
}); 

それはIEとFirefoxで正常に動作しますが、クロム17でフォームが送信されません。

$("form button.primaryAction").click(function() { 
    $(this).prop("disabled", true).addClass('disabledBtn'); 

    var form = // how can I get a reference to the form from the button 'this' ? 
    form.submit(); 
    return false; 
}); 

をしかし、あなたが見ることができるように私は、クリックハンドラ内からフォームへの参照を取得するかどうかはわかりません。私は私がして上記のコードを置き換えることができると思います。

Answer 1

あなたのコードは意味をなさない！まず、デフォルトの送信を無効にしてから、手動で送信します。

$("form button.primaryAction").click(function() { 
    $(this).prop("disabled", true).addClass('disabledBtn'); 

    var form = this.form; 
    form.submit(); // submits the form 
    return false; // disable the defualt submit.... ?! 
}); 

自動送信をキャンセルしないでください！

$("form button.primaryAction").click(function() { 
    $(this).prop("disabled", true).addClass('disabledBtn'); 
}); 

私はそれをこのように記述します。

$("form").submit(function() { 
    $('button.primaryAction').prop("disabled", true).addClass('disabledBtn'); 
}); 

Answer 2

this.formが参考になります。

すべてのフォーム要素（ボタン、入力、選択など）は、フォームのフォームを持ちます。このフォームは、それらが属するフォーム要素を指しています。

Answer 3

click（）関数ではなくjqueryのsubmit（）関数を使用すると、この問題を回避することができます。含まれている関数は、送信アクションが行われた後にのみを起動します。