web-dev-qa-db-ja.com

クリックされたら送信ボタンを無効にする方法は？

フォームの最後に送信ボタンがあります。

送信ボタンに次の条件を追加しました。

onClick="this.disabled=true;
this.value='Sending…';
this.form.submit();"

ただし、次のページに移動すると、パラメーターは渡されず、null値が渡されます。

javascriptjqueryhtmljspform-submit
42
maas

おそらく、フォームを2回送信しています。 this.form.submit()を削除するか、return falseを最後に追加します。

onClick="this.disabled=true; this.value='Sending…';"になるはずです

45
migajek

最初にフォームを送信してから、送信の値を変更する必要があります。

onClick="this.form.submit(); this.disabled=true; this.value='Sending…'; "
80
Andreas Köberle

iE11、FF53、GC58でテスト済み：

onclick="var e=this;setTimeout(function(){e.disabled=true;},0);return true;"
12
user8161358

無効なHTMLフォーム要素は、フォームを送信するときにpost/get値と共に送信されません。したがって、クリックした送信ボタンを無効にし、この送信ボタンにname属性が設定されている場合、要素は無効になっているため、post/get値で送信されません。これは正常な動作です。

Oneこの問題を解決する方法の1つは、非表示のフォーム要素を使用することです。

9
AlexV

秘theは、ボタンが無効になるのを遅らせ、window.setTimeout('this.disabled=true',0);を使用できるフォームを送信することです。

6
Frenchi In LA

<form>のonsubmitイベントでボタンを無効にする必要があります。

<form action='/' method='POST' onsubmit='disableButton()'>
    <input name='txt' type='text' required />
    <button id='btn' type='submit'>Post</button>
</form>

<script>
    function disableButton() {
        var btn = document.getElementById('btn');
        btn.disabled = true;
        btn.innerText = 'Posting...'
    }
</script>

注：この方法は、required属性を持つフォーム要素がある場合に機能します。

5
A-Sharabiani

JQueryを使用して、これを行うことができます。

$("#submitbutton").click(
   function() {
      alert("Sending...");
      window.location.replace("path to url");
   }
);
4
Manie

this.form.submit()は必要ないと思います。無効化コードを実行し、フォームをクリックするクリックを渡します。

2
Mitch Dempsey

私が使用した別の解決策は、ボタンを無効にする代わりに移動することです。その場合、これらの「無効化」問題はありません。最後に、本当に欲しいのは、ボタンを2回押さないことです。ボタンがなければ、できません。

別のボタンに置​​き換えることもできます。

1
Desarrollo Aplicaciones
function xxxx() {
// submit or validate here , disable after that using below
  document.getElementById('buttonId').disabled = 'disabled';
  document.getElementById('buttonId').disabled = '';
}
1
user3060544

ボタンを無効にすると、その名前=値のペアは実際にはパラメーターとして送信されません。ただし、パラメータの残りを送信する必要があります（それぞれの入力要素と親フォームが無効になっていない限り）。おそらくボタンのみをテストしているのでしょうか、他の入力フィールド、あるいはフォームさえも無効になっていますか？

1
BalusC
$('form#id').submit(function(e){
//OnClick code 
$(this).children('input[type=submit]').attr('disabled','disabled');
e.preventDefault();
return false;
});
0
Isuru Dinusha

AndreasKöberleのソリューションを拡張したドロップインの例を次に示します。イベントハンドラとドキュメント準備イベントにjQueryを使用しますが、これらをプレーンJSに切り替えることができます。

(function(document, $) {

  $(function() {
    $(document).on('click', '[disable-on-click], .disable-on-click', function() {
      var disableText = this.getAttribute("data-disable-text") || 'Processing...';

      if(this.form) {
        this.form.submit();
      }

      this.disabled = true;

      if(this.tagName === 'BUTTON') {
        this.innerHTML = disableText;
      } else if(this.tagName === 'INPUT') {
        this.value = disableText;
      }
    });
  });

})(document, jQuery);

その後、次のようにHTMLで使用できます。

<button disable-on-click data-disable-text="Saving...">Click Me</button>
<button class="disable-on-click">Click Me</button>
<input type="submit" disable-on-click value="Click Me" />
0
stephen.hanson

この作業例では、ユーザーはJavaScriptで、本当に中止したいことを確認します。 trueの場合、ダブルクリックを防ぐためにボタンが無効になり、データベースを更新するコードビハインドが実行されます。

<asp:button id="btnAbort" runat="server" OnClick="btnAbort_Click" OnClientClick="if (!abort()) {return false;};" UseSubmitBehavior="false" text="Abort" ></asp:button>

.netがボタンの名前を変更できるため、問題がありました

function abort() {
    if (confirm('<asp:Literal runat="server" Text="Do you want to abort?" />')) {
        var btn = document.getElementById('btnAbort');
        btn.disabled = true;
        btn.innerText = 'Aborting...'
        return true;
    }
    else {
        return false;
    }  
}

OnClickをOnClientClickでオーバーライドしているため、検証メソッドが成功しても、コードビハインドは機能しません。そのため、UseSubmitBehaviorをfalseに設定して機能させる

PS：コードがvb.netにある場合、OnClickは必要ありません！

0
Pierre-David Sabourin

私の場合、これが必要でした。

フォーム送信の送信ボタンを無効にする

Internet ExplorerおよびFirefoxなしでは正常に動作しますが、Google Chromeでは動作しませんでした。

問題は、実際に送信イベントをトリガーする前にボタンを無効にしていることです。

0
Pascal Desjardins

あなたの質問は紛らわしく、実際にいくつかのコードを投稿する必要がありますが、これはうまくいくはずです：

_onClick="this.disabled=true; this.value='Sending...'; submitForm(); return false;"
_

this.form.submit()を使用すると、送信ボタンをクリックしたときに自然に起こることを行っていると思います。同じページを送信する場合は、submitForm()メソッド（上記）でAJAXを使用する方法を検討する必要があります。

また、false属性値の最後にonClickを返すと、デフォルトイベントの発生（この場合はフォームの送信）が抑制されます。

0
TJ Koblentz

私はトリックをしました。タイムアウトを設定すると、完全に機能し、すべての値が送信されます。

    $(document).ready(function () {
        document.getElementById('btnSendMail').onclick = function () {
            setTimeout(function () {
                document.getElementById('btnSendMail').value = 'Sending…';
                document.getElementById('btnSendMail').disabled = true;
            }, 850);
        }
    });
0
Hasan Tuna Oruç

ボタンを無効にする簡単な方法は:data => { disable_with: "Saving.." }これはフォームを送信してからボタンを無効にします。また、required = 'required'.

0
chaitanya
 
    A better trick, so you don't lose the value of the button is

    function showwait() {
    document.getElementById('WAIT').style['display']='inline';
    document.getElementById('BUTTONS').style['display']='none';
    }
 

divに表示するコードをラップする

id = WAIT style = "display：none">表示するテキスト（divを終了）

divで非表示にするコードをラップする

id = BUTTONS style = "display：inline"> ...ボタンまたは非表示にするもの
onclick = "showwait（）;" （divの終了）

0
Mike