jQueryを使ってサブミットした後にボタンを無効にする

Question

私はそれについて多くの質問があることを知っていますが、いくつかの解決策を試してみましたが、何も効果がありません。私は、フォーム持っている私のDjangoのアプリで

：

<form method='post'> 
    <button type='submit'>Send</button> 
</form> 

を私は、ユーザーがフォームを送信した後にボタンを無効にするwan't。他の質問を使用して、私は次のように、いくつかのことを試してみました：私はクリックすると

<button type='submit' onclick="this.disabled=true">Send</button> 

、ボタンが無効になっている...しかし、フォームは送信されません。それぞれの試行で同じ問題が発生しました。ボタンが無効になっているか、フォームが送信されています。私は両方を行う方法を見つけることができません...

私はChromeを使用しています。なぜ私はこの問題を抱えていますか？ご協力ありがとうございました。

Answer 1

これを試してみてください。このような

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

Answer 2

てみてください、

<input type="submit" value="Send" onclick="javascript=this.disabled = true; form.submit();"> 

Answer 3

あなたが親フォームのsubmitイベント時に、それを無効にできます。

$("form").on("submit", function() { 
    $(this).find(":submit").prop("disabled", true); 
}); 

は、このコードを実行するようにしてくださいHTMLFormElementがロードされた後でなければ、何もバインドされません。結合が行われることを確保するために、document-readyブロック内からこれをオフに解雇：このような

// When the document is ready, call setup 
$(document).ready(setup); 

function setup() { 
    $("form").on("submit", function() { 
     $(this).find(":submit").prop("disabled", true); 
    }); 
} 

Answer 4

何かがうまくいくかもしれません。

<button id="btnSubmit" type='submit'> Send </button> 

<script> 
    $("#btnSubmit").on("click", function(e){ 
      e.PreventDefault(); 
      $(this).closest("form")[0].submit(); 
      $(this).prop('disabled',true) 
    }); 
</script> 

Answer 5

これはいかがですか？

onclick="this.style.visibility='hidden';" 

私は、無効にする代わりに、非表示にします。

ボタン、直接的な無効化だけvidible隠さ無効、disabled

onclick="this.style.disabled='true';" 

Answer 6

と私のバリアントに行きたい場合は：私はこれをよりよく好き

<input type="submit" name="namebutton" value="Nahrát obrázek" onclick="this.style.visibility='hidden';" ondblclick="this.style.visibility='hidden';"/> 

Answer 7

を：

<script> 
    var submit = false; 
    $('form').submit(function() { 
     if (submit) { return false; } 
     else { submit = true;} 
    }); 
</script> 

この方法では、Enterキーが2回以上提出されることも防ぎます

Answer 8

私はChromeを使用しています。なぜ私はこの問題を抱えていますか？

まあ、私はこれに対処初めて、私はこのようにそれを解決：

function blockButtons() { 
    $('button:submit').click(function(){ 
    $('button:submit').attr("disabled", true); 
    }); 
} 

をこれは、Mozilla Firefoxで完璧に働いたが、...。Google Chromeは、それを提出しなかったので、私はこれにそれを変更：

function blockButtons() { 
    $('button:submit').click(function(){ 
     var form = $(this).parents('form:first'); 
    $('button:submit').attr("disabled", true); 
    $('button:submit').css('opacity', 0.5); 
    form.submit(); 
    }); 
} 

これはMozilla Firefoxの中で両方を働いていた、しかし、その後IEの古いバージョンを使用して、ユーザーの皆様のいくつかは、二つの提出を持つのトラブルを経験しました。つまり、javascriptによって開始されたものと、onclickの事実を無視してブラウザによるものと、とにかく送信したものです。これはe.preventDefaultで修正できます。

Answer 9

私はこれが好きです、DOMをトラバースする必要はありません。 setTimeout関数の 入れ機能、要素をダブルクリックしたくない場合は、これは（.oneを使用し、setTimeoutを0

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

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

Answer 10

場合でも、提出作ると無効化ボタンの後にできます）

.one()

Answer 11

<button id="submit" type="submit">Send</button> 
<script> 
$(function() { 
$("#submit").one("click", function() { 
//enter your submit code 
}); 
}); 

は、Chromeで問題を手に入れたフォームを送信されませんでした。異なるコードの束を試みたが、これは私のために最高の仕事を何だった（と芋最高に見える）：

$('#form_id').submit(function() { 
    $("input[type='submit']", this) 
     .val("Please Wait...") 
     .attr('disabled', 'disabled'); 
    return true; 
    }); 

は、フォームのIDでform_idを交換してください。クラスはあまりにも当然の仕事：$('.form_class')

出典：JavaScript Coder

Answer 12

あなたはこのような何かを行うことができます。それは私とうまく動作します。

<form method='post' onSubmit='disableFunction()'> 
// your code here 
</form> 

は次にスクリプトで、この

<script> 
function disableFunction() { 
    $('#btn_submit').prop('disabled', true); 
} 
</script>