web-dev-qa-db-ja.com

jQueryで送信した後にボタンを無効にする

私はそれについて多くの質問があることを知っていますが、いくつかの解決策を試しましたが、何も機能しません。

私のDjangoアプリには次のようなフォームがあります：

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

ユーザーがフォームを送信したら、ボタンを無効にしたくありません。他の質問を使用して、次のようないくつかのことを試しました。

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

クリックすると、ボタンは無効になりますが、フォームは送信されません。そして、試行ごとに同じ問題が発生しました。ボタンが無効になるか、フォームが送信されます。両方の方法が見つかりません...

Chromeを使用しています。私がこの問題を抱えている理由についてのアイデアはありますか？ご協力ありがとうございました。

javascriptjquerydjango
33
Juliette Dupuis

これを試して：

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

私はこれが好きです、DOMを横断する必要はありません。 setTimeout関数に関数を配置します。これにより、setTimeoutが0の場合でも、サブミット後および無効化ボタンを作成できます。

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

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

親フォームの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);
    });
}
5
Sampson

このような何かが動作する可能性があります。

<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>
3
Gaz Winter

このように試してください

  <input type="submit" value="Send" onclick="javascript=this.disabled = true; form.submit();">
2
Adem Öztaş

これはどう？

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

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

disabledを使用する場合

onclick="this.style.disabled='true';"
1
Fahim Parkar

私のバリアント、無効化ボタン、直接無効化されていませんが、表示のみが非表示です：

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

要素をダブルクリックしたくない場合は、.one（）を使用します

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

。one（）

0
Prince J Painadath

このようなことができます。それは私とうまく仕事です。

$("button#submitted").click(function () {
        $("button#submitted").prop('disabled', true);
});

ボタンをダブルクリックします。このコードは実行されます

0
Đoàn Anh Tú

私はこれが好きです：

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

この方法では、Enterキーが複数回送信されることも防ぎます

0
Cenas

フォームが複数回送信されないようにする必要があります。フォームを他の方法で送信できるため、ボタンを無効にすることは適切な解決策ではありません。

JavaScript：

$('form').submit(function(e) {
    // if the form is disabled don't allow submit
    if ($(this).hasClass('disabled')) {
        e.preventDefault();
        return;
    }
    $(this).addClass('disabled');
});

フォームが正しく無効になったら、外観をカスタマイズできます。

CSS：

form.disabled {
    pointer-events: none;
    opacity: 0.7;
}
0
Fabio Caccamo

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の古いバージョンを使用している一部のユーザーは、2つのサブミットを持つトラブルを経験しました。ブラウザはonclickの事実を無視して、とにかく送信するだけです。これはe.preventDefaultで修正できると思います。

0
SPIRiT_1984

このようなことができます。それは私とうまく仕事です。

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

次に、スクリプトで、これを追加します

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

Chromeで問題が発生し、フォームを送信していませんでした。たくさんの異なるコードを試しましたが、これが私にとって最もうまくいったものでした（そして最高に見える）：

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

form_idをフォームのIDに置き換えます。クラスももちろん機能します：$('.form_class')

ソース： JavaScript Coder

0
Rani Kheir