クリック後のJavascriptの無効化ボタンですが、フォームは送信されません

Question

ワンクリック後にボタンを無効にするコードがありますが、問題はフォームが送信しないことです。ワンクリック後にボタンを無効にしても、フォームの送信依頼はどうすればできますか。

コード

<input id="submitbtn" name="submit" type="submit" value="Submit for Payment" /> 

<script type="text/javascript"> 
    $(function(){ 
     $('#submitbtn').one('click', function() { 
     $(this).attr('disabled','disabled'); 
     }); 
    }); 
</script> 

Answer 1

フォーム送信イベントfirの後までボタン無効化コードを延期するあなたの最善の選択肢かもしれません。これはいくつかの方法で行うことができます。無効にするボタンが1つしかない場合は、submitイベントリスナーをフォームに追加し、コールバックで無効にします。別の簡単な方法は、0ミリ秒後に実行されるsetTimeoutを使用することです。

setTimeout(() => $(this).attr('disabled','disabled') , 0); 

あなたが.prop()をサポートしているのjQueryのバージョンを使用している場合にも、私の代わりにattrのものを使用してお勧めします。例：$(this).prop('disabled', true)。 `のMyFunction（）`定義されて

Answer 2

あなたはボタンを無効にするが、最初に提出して、フォームにonSubmit検証属性を追加し、そこにボタンを無効にするコードを置くには、すでに起こっている：

<form onsubmit="myFunction();"> 

<script type="text/javascript"> 
    function myFunction(){ 
     $('#submitbtn').attr('disabled','disabled'); 
     // my submit code here 
    } 
</script> 

Answer 3

てみてくださいthis：

$('form').submit(function() { 
    $(this).find("button[type='submit']").prop('disabled',true); 
}); 

Answer 4

$(function(){ 
 
    $('#submitbtn').on('click', function() { 
 
    $(this).prop('disabled', true); 
 
    $("#formID").submit(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="submitbtn" name="submit" type="submit" value="Submit for Payment" />