質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

4回答

2619閲覧

【jQuery】2重ポスト禁止したい

pecchan

総合スコア555

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

2クリップ

投稿2019/03/12 06:21

編集2019/03/12 07:06

フロント側の知識が皆無なのですが、送信ボタンの2度押しを制御したく。
一度クリックされたら送信ボタンをdisable化したいです。

さいきょうの二重サブミット対策
↑の、
「2. JavaScriptでのサブミットボタンのDisable化」の部分を参考にしました。

1度、送信ボタンを押してもDisableになりませんでした。
何度も押せてしまいました。

分かる方教えていただいたけないでしょうか。

宜しくお願い致します。

送信ページ

html

1<form action="Contacts/contact" id="test" method="post" accept-charset="utf-8"> 2 3 <div style="display:none;"> 4 <input type="hidden" name="_method" value="POST"/> 5 </div> 6 7 <input type="hidden" name="data[hoge][data]" value="xxxx" /> 8 9 <button type="submit" name="confirm" value="revise" class="btn btn-primary btn-md">修正する</button> 10 <button type="submit" name="confirm" value="send" class="btn btn-primary btn-md">送信する</button> 11 12</form> 13

駄目

javascript

1$(function () { 2 $('form').submit(function () { 3 //alert("TEST"); 4 $(":submit", this).prop("disabled", true); 5 }); 6}); 7 8

buttonにしたけど駄目

javascript

1$(function () { 2 $('button').submit(function () { 3 //alert("TEST"); 4 $(":submit", this).prop("disabled", true); 5 }); 6}); 7 8

これも駄目

javascript

1$(function () { 2 $('#confirm').submit(function () { 3 //alert("TEST"); 4 $(":submit", this).prop("disabled", true); 5 }); 6}); 7 8

【同日追記】
動作環境を追記致します
cakephp(2.7.8)
PHP 5.6
chorome

【実現したいイメージ】
1度送信ボタンを押すと、結果画面にすぐには遷移しないため、暫く送信ボタンをDisableにしたいです

【現状】
今は、送信ボタンを押しても何も変わらないため、遷移前に何度も送信出来てしまいます。

【同日さらに追記】
たくさんの方が回答くださり感謝してます。有難う御座います。
知識がないため、1つずつ言葉の意味を調べております。
時間が掛かりすみません。

もう少し詳しく追記致します。

よくある「お問い合わせ」ページを作っています。
送信ボタンのクリックで内容をメールを送信します。
コントローラで受け取って、メール送信し、結果画面を表示します。
ですが、送信ボタンクリック後、すぐに結果画面が表示出来ないため、その間に何度も送信ボタンが押せてしまいます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

coco_bauer

2019/03/12 06:45

どのような方法でDisableになっていない事を確かめたのですか? 質問には、「Disableになっているかどうかを調べて、結果を表示する」機能のコードが見当たらないように思うのですが。
FKM

2019/03/12 06:46

submitした先のサーバーは何を使って動かしていますか?
pecchan

2019/03/12 06:51

記載不足、申し訳ございません。 追記させていただきます。
m.ts10806

2019/03/12 07:10

JavaScriptで制御してもブラウザデベロッパーツールなどから改竄が可能なのであくまで第一段階の対応ということは念頭においてください。
pecchan

2019/03/12 08:38

mts10806様 ご親切有難う御座います。 はい。実際にはトークンによるチェックも追加してます。 有難う御座います。
guest

回答4

0

ベストアンサー

まずはHTMLとサブミットとはなんぞやの解説が必要ですね。
ざっくり行きますので、更に続けて仕事をしていくならゆくゆくで良いので覚えていきましょう。

HTMLは親子関係を記述するのが得意なマークアップ言語です。
段落を表すp、タイトルを表すh1〜h6と言ったような要素を指定し、タグ付けしてあげながら内部に掘り下げていきます。

今回のポイントになっているformは「A4で出来たエントリーシートの紙」をイメージして下さい。
サブミットというのは直訳すれば投稿です。
ユーザは紙に情報を書いていきます(実際にはinputの要素に値を指定していく)
そして、全ての情報が盛り込まれて、完成したから投稿しようと意思を持ってサブミットボタンを押します。

投稿の対象は?
そりゃ「A4のエントリーシート」そのものですよね?
という訳で、サブミットという行為はformにかかります。

  • $('form').submit(fn): 正しい使い方
  • $('button').submit(fn): なんだそりゃ?
  • $('#confirm').submit(fn): なんだそりゃ?

というわけで、一番最初のものが挙動としては正しく、
下2つの回避策は全てトンチンカンな事やってます。

最後の#confirmに至っては、CSSセレクタのID指定がひっついていますが、
サブミットボタンのIDにconfirmは指定されていませんでした。
なおさら駄目です。


一旦は何故動作していないのかの検証をしていきましょう。
質問文のコードはざっくりと確認しましたが、動作するはずのコードです。

まぁ、サブミットボタンを非活性にするという挙動なので、
typeがtextのフォーム部品でEnterキーを入力すれば平然とサブミットさせられるので対応としてはあかんやつですが。

submit時は関数を実行して結果がfalseであれば実行を取りやめるという仕様になっていますので、
下記のように記述してアラートが表示された後にサブミットがキャンセルされた事を確認してください。
そうなれば、本当にボタンが非活性になったのか、なっていないのかを制御出来るようになったと言えるはずです。

因みにアラートがでなければ、そもそもこのコードが効いていません。
jQuery等のライブラリがちゃんと入ってるかどうかを確認してみて下さい。

JavaScript

1$(function () { 2 $('form').submit(function () { 3 alert("test"); 4 $(":submit", this).prop("disabled", true); 5 return false; 6 }); 7});

投稿2019/03/12 07:00

編集2019/03/12 07:12
miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pecchan

2019/03/12 07:09

有難う御座います。 おっしゃる通りです。 基本が欠けており、めちゃくちゃになってました・・・。 分かりやすい解説有難う御座います。 解決よりも、まずゆっくり何度も読ませていただきます。
pecchan

2019/03/12 08:45

アラート表示されないのは、ブラウザ(chrome)のキャッシュが原因でした(*_*) 関連して ・formの考え方 ・textのフォーム部品でのEnterキー ・type="submit"ならばサブミットを発火 など沢山のことを教えていただき有難う御座います。
guest

0

submitしてしまうと一度サーバに送ってしまうので、それまでそのページが持っていたステータスは初期化されてしまいます。

試しに、formのactionを自分のところに戻るようにリンクを変えてみてください。一瞬だけボタンが灰色になって、また元に戻るのがわかると思います。

また、効果を試してみるなら、スクリプトの最後に

return false;

をつけてみてください。両方のボタンが灰色になったままだと思います。

投稿2019/03/12 06:39

FKM

総合スコア3608

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pecchan

2019/03/12 08:33

有難う御座います。 確認できました! 最初、IEとEdgeのみ確認でき、chromeだけ動作せず悩んでました。 chromeのクッキー、キャッシュを削除したら確認できました!!
pecchan

2019/03/12 19:47

有難う御座います! そうなんですね!知りませんでした! SecurityComponent調べて検討させていただきます!
FKM

2019/03/12 23:57

リンク貼り忘れてました…
pecchan

2019/03/13 07:43

わざわざお手間すみません。リンク有難う御座います^^
guest

0

onsubmitだと送信したものを止めたりする必要がありますし、下記流れを汲むはずなので不自然です。
「ボタン押す」→「ボタンを非活性にする」→「フォーム送信」という流れ
type=submitをtype=buttonに変えてイベントをsubmitからclickに変えてはどうでしょうか。
で、最後に
$("#test").submit();

投稿2019/03/12 06:30

編集2019/03/12 06:49
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi-sun

2019/03/12 06:40

ボタン自体にはフォームをサブミットさせる機能は備わっていないので、 その場合はsubmitを別途発火するロジックを書かないと駄目でしょうね。 Qiitaの記事もわかりやすさを兎に角優先してて何をする必要があるかの解説はなおざりですし…… なんぼなんでも$(":submit")は無いだろ…というお気持ち
m.ts10806

2019/03/12 06:44

そうでしたね。追記しておきます
m.ts10806

2019/03/12 06:48

機能実現先行で背景や目的、前提部分が抜けることはよくありますね。 回答でも気をつけないと・・・
miyabi-sun

2019/03/12 07:05

私の勘違いでした。 ボタンもtype="submit"ならばサブミットを発火させる機能がありますし、jQueryの:submitセレクタでもってこれます。 (ただし、ブラウザにより動作したりしなかったりするので、クラス名指定等で確実に捕まえた方が良さそうですね) https://api.jquery.com/submit-selector/
m.ts10806

2019/03/12 07:07

補足ありがとうございます
pecchan

2019/03/12 08:33

有難う御座います。 そういう方法もあるのですね!
guest

0

サブミット後、ページを戻ってみてください
ボタンがdisabledになっていませんか?

sample

e.preventDefaultでサブミットを一時停止して確認してみてください

javascript

1<script> 2$(function(){ 3 $('form').submit(function (e) { 4 $(":submit", this).prop("disabled", true); 5 e.preventDefault(); 6 }); 7}); 8</script> 9<form id="test" method="post"> 10<div style="display:none;"> 11<input type="hidden" name="_method" value="POST"/> 12</div> 13<input type="hidden" name="data[hoge][data]" value="xxxx" /> 14<button type="submit" name="confirm" value="revise" class="btn btn-primary btn-md">修正する</button> 15<button type="submit" name="confirm" value="send" class="btn btn-primary btn-md">送信する</button> 16</form>

投稿2019/03/12 06:27

編集2019/03/12 06:35
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pecchan

2019/03/12 06:31

有難う御座います。 $('form'). $('button'). $('#confirm'). いずれの場合も、ページを戻ってもdisabledになっていませんでした(*_*)
yambejp

2019/03/12 06:36

そういえばchromeとかもどってもdisabledが残りませんね e.preventDefault()で動作を止めれば disabledの状態が確認できると思います。 (e.preventDefaultを外せばsubmitされます)
pecchan

2019/03/12 08:36

有難う御座います。 chromeのクッキー、キャッシュを削除したら確認できました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問