質問: フロント側の知識が皆無なのですが、送信ボタンの2度押しを制御したく。 一度クリックされたら送信ボタンをdisable化したいです。 さいきょうの二重サブミット対策 ↑の、 「2. JavaScriptでのサブミットボタンのDisable化」の部分を参考にしました。 1度、送信ボタンを押してもDisableになりませんでした。 何度も押せてしまいました。 分かる方教えていただいたけないでしょうか。 宜しくお願い致します。 送信ページ ``` 修正する 送信する ``` 駄目 ``` $(function () { $('form').submit(function () { //alert("TEST"); $(":submit", this).prop("disabled", true); }); }); ``` buttonにしたけど駄目 ``` $(function () { $('button').submit(function () { //alert("TEST"); $(":submit", this).prop("disabled", true); }); }); ``` これも駄目 ``` $(function () { $('#confirm').submit(function () { //alert("TEST"); $(":submit", this).prop("disabled", true); }); }); ``` 【同日追記】 動作環境を追記致します cakephp(2.7.8) PHP 5.6 chorome 【実現したいイメージ】 1度送信ボタンを押すと、結果画面にすぐには遷移しないため、暫く送信ボタンをDisableにしたいです 【現状】 今は、送信ボタンを押しても何も変わらないため、遷移前に何度も送信出来てしまいます。 【同日さらに追記】 たくさんの方が回答くださり感謝してます。有難う御座います。 知識がないため、1つずつ言葉の意味を調べております。 時間が掛かりすみません。 もう少し詳しく追記致します。 よくある「お問い合わせ」ページを作っています。 送信ボタンのクリックで内容をメールを送信します。 コントローラで受け取って、メール送信し、結果画面を表示します。 ですが、送信ボタンクリック後、すぐに結果画面が表示出来ないため、その間に何度も送信ボタンが押せてしまいます。
回答: submitしてしまうと一度サーバに送ってしまうので、それまでそのページが持っていたステータスは初期化されてしまいます。 試しに、formのactionを自分のところに戻るようにリンクを変えてみてください。一瞬だけボタンが灰色になって、また元に戻るのがわかると思います。 また、効果を試してみるなら、スクリプトの最後に ``` return false; ``` をつけてみてください。両方のボタンが灰色になったままだと思います。