web-dev-qa-db-ja.com

送信後にのみ送信ボタンを無効にする

次のHTMLとjqueryがあります。

<html dir="ltr" lang="en">
<head>
</head>
<body>

<h2>Test disabling submit button for 1 minute...</h2>

<br/>

<p style="text-align:center"> 
<form id="yourFormId" name="yourFormId" method="post" action="#">
 <input type="submit" class="submitBtn" value="I Accept"/>
</form>
</p>




<!--script to disable the submit button -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">  
</script>
<script type="text/javascript">

$(document).ready(function () {
    $(".submitBtn").click(function () {
        $(".submitBtn").attr("disabled", true);
        return true;
    });
});

</script>
<!--script ends here-->

</body>
</html>

スタンドとして、送信ボタンは押されると無効になります。ただし、一度押すと送信を実行していないようです。ボタンを無効にするためにjqueryを削除した場合、ボタンは通常どおり送信を実行します。

送信を実行した後にのみボタンを無効にするにはどうすればよいですか？上記の現在のjqueryは、送信操作と競合しているようです。

この問題を解決するための提案は非常に役立ちます。

javascriptjquerybuttonsubmit
28
Dev P

送信イベントに無効化部分を追加します。

$(document).ready(function () {
    $("#yourFormId").submit(function () {
        $(".submitBtn").attr("disabled", true);
        return true;
    });
});
33
pvnarula

私は同じ問題に直面しました。顧客がフォームを送信すると、複数の電子メールアドレスにメールメッセージが送信されます。ページの応答に時間がかかりすぎる場合、ボタンが2回以上押されたことがあります。

Onsubmitハンドラーでボタンを無効にしようとしましたが、フォームはまったく送信されませんでした。上記のソリューションはおそらくうまく機能しますが、私にとっては少しトリッキーすぎるので、他のことを試してみることにしました。

送信ボタンの左側に、2番目のボタンを配置しました。このボタンは表示されず、起動時に無効になります。

<button disabled class="btn btn-primary" type=button id="btnverzenden2" style="display: none"><span class="glyphicon glyphicon-refresh"></span> Sending mail</button>   
<button class="btn btn-primary" type=submit name=verzenden id="btnverzenden">Send</button>

フォームに接続されたonsubmitハンドラーでは、「実際の」送信は非表示になり、「偽の」送信はメッセージが送信されているというメッセージとともに表示されます。

function checkinput // submit handler
{
    ..
    ...
    $("#btnverzenden").hide(); <= real submit button will be hidden
    $("#btnverzenden2").show(); <= fake submit button gets visible
    ...
    ..
}

これはうまくいきました。それがあなたのお役に立てば幸いです。

18
eheydenr

ちょっとこれは動作します、

   $(function(){
     $(".submitBtn").click(function () {
       $(".submitBtn").attr("disabled", true);
       $('#yourFormId').submit();
     });
   });
12
Tukuna

このソリューションには、モバイルで作業し、非常にシンプルであるという利点があります。

<form ... onsubmit="myButtonValue.disabled = true; return true;">
7
mcastle

これが編集されたスクリプトです。役に立てば幸いです。

   <script type="text/javascript">
        $(function(){
            $("#yourFormId").on('submit', function(){
                return false;
                $(".submitBtn").attr("disabled",true); //disable the submit here
                //send the form data via ajax which will not relaod the page and disable the submit button
                $.ajax({
                   url      : //your url to submit the form,
                   data     : { $("#yourFormId").serializeArray() }, //your data to send here 
                   type     : 'POST',
                   success  : function(resp){
                        alert(resp);    //or whatever 
                   },
                   error    : function(resp){

                   }
                });
            })
        });
    </script>
6
Nil'z

コメントを読んで、これらのソリューションはブラウザ間で一貫していないようです。それから、jQueryとイベント関数バインディングが登場する前に、10年前にこれをどのようにしたかを考えることにしました。

だからここに私のレトロなヒップスターソリューションがあります：

<script type="text/javascript">
var _formConfirm_submitted = false;
</script>
<form name="frmConfirm" onsubmit="if( _formConfirm_submitted == false ){ _formConfirm_submitted = true;return true }else{ alert('your request is being processed!'); return false;  }" action="" method="GET">

<input type="submit" value="submit - but only once!"/>
</form>

違いの主な点は、送信ハンドラでfalseを返すことでフォームの送信を停止する機能に依存していることと、グローバルフラグ変数を使用していることです。

しかし、プラス面では、ブラウザの互換性の問題を想像することはできません。おそらく、Netscapeでも動作するでしょう。

4
Gordon Rouse

私のために働いて、フォームを送信できたsetTimeoutでテストすると、この回答が参照されます https://stackoverflow.com/a/779785/5510314

$(document).ready(function () {
    $("#btnSubmit").click(function () {
        setTimeout(function () { disableButton(); }, 0);
    });

    function disableButton() {
        $("#btnSubmit").prop('disabled', true);
    }
});
4
Crying Freeman

bindセクションをスクリプトファイルに追加すると、問題が解決しました。

完全に私はこの2つのステップを行いました：

1-ボタンを無効にし、二重送信を防ぎます：

$('form').submit(function () {
    $(this).find(':submit').attr('disabled', 'disabled');
});

2-検証エラーが発生した場合に送信ボタンを有効にする：

$("form").bind("invalid-form.validate", function () {
    $(this).find(':submit').prop('disabled', false);
});
3
MOH3N

すべての送信ボタンで動作するように、これをグローバルコードに追加します。

$("input[type='submit']").on("click", function (e) {
    $(this).attr("disabled", true);
    $(this).closest("form").submit()
});
2
kravits88

多くの人が指摘しているように、送信ボタンを無効にすると、いくつかのマイナスの副作用があります（少なくともChromeでは、押されたボタンの名前/値が送信されないようにします）。サブミット機能を使用しているため、すべてのHTML 5検証が成功した後にのみ呼び出されます。コード：

  $("form.myform").submit(function (e) {
    // Check if we have submitted before
    if ( $("#submit-btn").attr('attempted') == 'true' ) {
      //stop submitting the form because we have already clicked submit.
      e.preventDefault();
    }
    else {
      $("#submit-btn").attr("attempted", 'true');
    }
  });
1
Mario Hendricks
$(document).ready(function() {
    $(body).submit(function () {
        var btn = $(this).find("input[type=submit]:focus");
        if($(btn).prop("id") == "YourButtonID")
            $(btn).attr("disabled", "true");
    });
}

およびサーバー側のコード：

protected void YourButton_Clicked(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "", "$('#YourButtonID').removeAttr('disabled');", true);
}
0
Saeed Taran