web-dev-qa-db-ja.com

jqueryはフォーム送信時に送信ボタンを無効にします

何らかの理由で、このコードはページを更新しますが、フィールドは投稿されません...

$('form').submit(function(){
    $('input[type=submit]', this).attr('disabled', 'disabled');
});

これをコーディングするより良い方法はありますか？

jqueryformssubmit
25
scarhand

コードがフォームの送信アクションを変更しています。送信する代わりに、ボタン属性を変更します。

これを試して：

$('input[type=submit]').click(function() {
    $(this).attr('disabled', 'disabled');
    $(this).parents('form').submit();
});
37
Diodeus - James MacFarlane

私はこれを行ういくつかの方法を見てきました：

  • クリック時にボタンを無効にする
  • 送信時にボタンを無効にする
  • 送信時にフォームを無効にする

しかし、期待どおりに動作するものはないようであるため、私は独自の方法を作成しました。

_submit-once_というフォームにクラスを追加し、次のjQueryを使用します。

_$('form.submit-once').submit(function(e){
  if( $(this).hasClass('form-submitted') ){
    e.preventDefault();
    return;
  }
  $(this).addClass('form-submitted');
});
_

これにより、フォームに別のクラス_form-submitted_が追加されます。その後、フォームを再度送信しようとしてこのクラスがある場合、jQueryはフォームが送信されないようにし、_return;_で関数を終了します。したがって、何も再送信されません。

私のフォームの中には、複数回送信できるAjaxを使用するものがあるため、$('form.submit-once')の代わりに$('form')を使用することにしました。

this jsFiddle でテストできます。 _target="_blank"_をフォームに追加して、フォームの送信を複数回テストできるようにしました。

サイドノート：サーバー側での二重送信も防ぐことで、非JSユーザーを検討することができます。たとえば、最後の送信日時を保存するセッション変数があり、3秒以内のそれ以上の送信は無視します。

30
rybo111

問題のコードが機能しない理由はわかりません。同様の簡単なコードスニペットを以下に示します。過度に複雑にしないでください。

$("form").submit(function () {
    // prevent duplicate form submissions
    $(this).find(":submit").attr('disabled', 'disabled');
});

私にとっての利点：

  • hTML5でうまく動作します フォーム検証 ;
  • 一般的な方法で記述されているため、「そのまま」再利用できます。
2
naXa

Chrome 53：

$('input[type=submit]').addClass('submit-once').click(function(e){
    if($(this).hasClass('form-submitted') ){
        e.preventDefault();
        return;
    }
    $(this).addClass('form-submitted');
});
2
SaeX

コードに理由はありません 動作しないはずです 。フォームを送信すると、送信ボタンは無効になります。デモでJSFiddleに送信されるヘッダーを確認し、フォームフィールドが実際に送信されています（IEおよびChrome）でテスト済み）：

POST http://fiddle.jshell.net/josh3736/YnnGj/show/ HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Referer: http://fiddle.jshell.net/josh3736/YnnGj/show/
Accept-Language: en-US,en;q=0.7,es;q=0.3
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
Host: fiddle.jshell.net
Content-Length: 9
Connection: Keep-Alive
Pragma: no-cache

test=It+works

次のステップは次のとおりです。

  • HTTPトラフィックを検査できるもの（私のお気に入りは Fiddler ）を使用して、フォームフィールドが実際にサーバーに送信されているかどうかを確認します。もしそうなら、それは明らかにあなたのサーバーの問題です。
  • フォームフィールドが送信されていない場合は、ページで何か他のことが行われています。何が起こっているかを正確に把握できるように、コードをさらに投稿してください。
2
josh3736

私のために働いたもの....

$('body').bind('pagecreate', function() {
    $("#signin-btn").bind('click', function() {
        $(this).button('disable');
        showProgress(); // The jquery spinny graphic
        $('form').submit();
    });
});
1
user2288459

ボタンを追加する必要がある場合は、常に<input type='button'>役立つタグ。送信ボタンを送信したくない場合、最良の方法は送信ボタンを追加しないことです。

0
Bene

画像読み込みアイコンを使用したすべての入力、ボタン、リンクの一般的なソリューションは次のとおりです。

$(function(){
    $(document).on('click', 'input[type=submit], button[type=submit], a.submit, button.submit', function() {

        // Preserves element width
        var w = $(this).outerWidth();
        $(this).css('width', w+'px');

        // Replaces "input" text with "Wait..."
        if ($(this).is('input'))
            $(this).val('Wait...');

        // Replaces "button" and "a" html with a
        // loading image.
        else if ($(this).is('button') || $(this).is('a'))
            $(this).html('<img style="width: 16px; height: 16px;" src="path/to/loading/image.gif"></img>');            

        // Disables the element.
        $(this).attr('disabled', 'disabled');    

        // If the element IS NOT a link, submits the
        // enclosing form.
        if (!$(this).is('a'))    
            if ($(this).parents('form').length)
                $(this).parents('form')[0].submit();

        return true;
    })

}）;

リンクの場合、クラス「submit」を追加する必要があります。

0
Arivan Bastos

コードは問題ありません。私はこの同じ問題に遭遇しましたが、私にとっては、JavaScriptではなくphpに問題がありました。ボタンを無効にすると、フォームと共に送信されなくなり、私のphpは送信ボタンに依存していました

if(isset($_POST['submit'])){
   ...
}

そのため、ページは更新されますが、phpは実行されません。現在、required属性を持つ別のフィールドを使用しています。

0
VeeK