submitボタンの無効化処理について

2023/10/27 12:17

このQ&Aのポイント

submitボタンを押して、再度ボタンが押されてしまい、処理が二重になる問題に対処するために、javascriptを使用してボタンを1度しか押せないようにしています。
しかし、1度しかボタンを押していないのに、最初の送信に連続して空白のデータが送信される場合があります。
上記のコードには不足している部分がある可能性があります。

ベストアンサー

submitボタンの無効化処理について

2013/05/02 20:04

submitボタンを押して、次の処理が重い為に再度ボタンが押されてしまい、処理が二重になっていまうので、下記のjavascriptでボタンを1度しか押せないようにしています、。 // submitボタン無効化処理 function DisableButton(b) { b.disabled = true; b.value = '投稿中'; b.form.submit(); } しかし、今度は1度しか押していないのに、最初の送信に連続して空白のデータが送信されてしまう場合があります。 javascript を消して手動で1度しかボタンを押さない時はそういった問題は起きません、ただし振出しに戻って手動で連続で押されてしまう可能性が出てきてしまいます。以上から、上記のコードになにか不足している部分があるのではないかと考えているのですが、わかりません。よろしくお願いいたします。

yamatonadeshico
お礼率75% (15/20)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

LancerVII
ベストアンサー率51% (1060/2054)

2013/05/03 09:00 回答No.2

こんにちは。試していないので実際にどう動くかわかりませんが <input type="submit" value="送信" onclick="DisableButton(this);"> とか呼んでいますか？そうするとDisableButtonの中でまたformをsubmitしている気がします。 <input type="button" value="送信" onclick="DisableButton(this);"> にしてあげれば解決するかもしれません。＊type="submit"にonclickでさらにsubmitしたことが無いのでどう動くかわかりませんが、もしtype="submit"になっているならtype="button"にして試してみてください。

質問者

お礼 2013/05/03 09:27

ありがとうございます！ <input type="button" value="送信" onclick="DisableButton(this);"> こちらでうまく動くようになりました！本当に助かりました。

その他の回答 (1)

notnot
ベストアンサー率47% (4846/10257)

2013/05/02 22:50 回答No.1

HTMLの方はどうなってますか？

質問者

お礼 2013/05/03 09:28

<form action="toukou.php#top" method="post"> <input name="toukou" type="submit" value="投稿する" onclick="DisableButton(this);" class="btn" /> こんな感じでした。おかげ様で解決できました。ご返答ありがとうございました。

関連するQ&A

2度押し防止ボタン
HTML5 + CSS3 でスマートフォンゲームを作っています。回線が混雑している状況でボタンを2度押ししても1回しかカウントされないボタンを作りたいと考えています。【基本的な知見】下記であれば要望に沿ったボタンになります。(ボタンはCSS3の標準ボタンを使用) <form action="form.cgi" method="post"> <input type="hidden" name="point" value="1" /> <SCRIPT TYPE="text/javascript">  </SCRIPT> <input type="button" value="購　入" onClick="disableButton()" name="button1"> </form> 【やりたいこと】「ボタンに数量を表示したいことと、ボタン上の数値表記とCGIに渡すvalueが異なることがある」ため、CSS3の標準ボタンを止め下記のオリジナルCSSのボタンを使用します。 <button class="button8" type="submit" name="point" value="1050" onClick="disableButton()"><div>50ポイント</div></button> このオリジナルCSSのボタンを使用した場合の2度押し防止のjavascriptはどのように改造すればいいか教えてください。上記に示したjavascriptの「document.form1.button1.disabled = true;」のbutton1をpointに変更したところ、数値をCGIに渡せませんでした。よろしくお願いいたします。
- ベストアンサー
- JavaScript
複数のラジオボタン選択肢によりsubmitを押せなくする
初めて質問させていただきます。ラジオボタンが下記の選択状態の時だけ「送信（submit）」ボタンを enable で表示させたいです。１：●　２：○ １：●　２：○ それ以外の選択肢では「送信（submit）」ボタンを disabl で押せないようにしたいです。調べて、近い動作にはなりましたが、javascriptに関して殆ど知識がないため、これから先がさっぱりわかりません。ぜひ教えを乞いたく参りました。お知恵をお貸しください<(__)> どうぞ宜しくお願い致します。 <HTML> <HEAD> <script type="text/javascript"> </script> <form> 1:<input type="radio" name="radio1" value="1" onClick="unlock1(this)"> 2:<input type="radio" name="radio1" value="2" onClick="unlock2(this)"><br> 1:<input type="radio" name="radio2" value="1" onClick="unlock1(this)"><br> 2:<input type="radio" name="radio2" value="2" onClick="unlock2(this)"><br> <input name="send" type="submit" value="送信" disabled > </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
選択肢によってラジオボタンを押せなくする(無効にする)
2.7.2.の質問があって、ラジオボタンの選択肢(１～５まで）によって、１を選択したら、2.7.2.1のみ選択、その他はラジオボタン押せなくする、２を選択すると、2.7.2.2のみ選択、その他はラジオボタン押せなくする、３を選択すると、2.7.2.3のみ選択、その他はラジオボタン押せなくする４、５を選択すると、2.7.2.1、2.7.2.2、2.7.2.3、すべてを押せなくして、submitボタンを押して次へという処理をしたいのですが、下記のプログラムではまったく動作しません。どこが悪いのでしょうか？お分かりの方教えていただけませんか？ <script language="javascript">  </script> 以下省略
- 締切済み
- JavaScript
2度押し防止機能を使いたい
スマートフォン向けホームページを作っています。【1】下記のjavascript では「送信ボタンの2度押しを防止」することが出来ます。 <script> function DisableButton(b) { b.disabled = true; b.value = 'Submitting'; b.form.submit(); } </script> <form action="abc.cgi" method="post""> <select name="volume"> <option selected="selected">下記から選択</option> <option>100</option> <option>200</option> <option>300</option> <input type="submit" name="SubmitButton" id="SubmitButton" value="Submit" onclick="DisableButton(this);" /> </form> ************************************** 【2】一方、下記のフォームでは、100,200,300のいずれかを選んだ瞬間にFormアクションが開始されます。(Submitボタンが不要です) <form action="abc.cgi" method="post" name="form1"> <select name="volume" onChange="this.form.submit() "> <option selected="selected">下記から選択</option> <option>100</option> <option>200</option> <option>300</option> </form> **************************************** 私は、「Submitボタンが不要」な【2】をベースにホームページを作りたいと考えています。【2】の問題点【2】を通信回線が悪い場所（スマートフォンの3G回線地域など)で使用した場合、100を選択した直後に200を続けて選択すると、100+200の合計300個を購入出来てしまいます。 ●やりたいこと一度100を選んだら、その直後に200を選んでも2回目に選んだ200は無効になるようにしたい（100しか購入できない)と考えています。そこで、【1】のjavascriptと組み合わせようとしたのですが、うまくいきません。 (従来同様100+200が出来てしまいます) 悪い例 <script> function DisableButton(b) { b.disabled = true; b.value = 'Submitting'; b.form.submit(); } </script> <form action="abc.cgi" method="post" name="form1"> <select name="volume" onChange="this.form.submit()" onChange="DisableButton(this);"> <option selected="selected">下記から選択</option> <option>100</option> <option>200</option> <option>300</option> </form> 【質問】【2】をベースに2度選択を無効にするためにはどうすればいいかアドバイスをお願いいたします。
- ベストアンサー
- JavaScript
複数ボタンを制御出来る2度押し防止ボタン
HTML5+CSS3でゲームを作っています。フォームがあり、ボタンが複数並んでいます。 <SCRIPT TYPE="text/javascript">  </SCRIPT> <FORM action="buy.cgi" method="post" name="form1" id="form1"> <button class="button8" type="submit" name="d4_buy" value="300 onclick="sendform()">300購入</button> <button class="button8" type="submit" name="d4_buy" value="400" onClick="sendform()">400購入</button> </FORM> 上記で正常に作動しますが、3G環境など通信状態の悪い時に、「300購入ボタンを押した直後に400購入ボタンを押す」と700購入が出来てしまいます。【希望事項】 2つのボタンを連続して押しても2つ目が無効になるようにしたいというのが希望です。ネットで調べたところ ****************************************** http://okwave.jp/qa/q627484.html ****************************************** <HTML><BODY> <FORM method="get" action="http://www.google.com/search"> <INPUT type="submit" value="submit1" onclick="this.form.q.value=this.value;this.disabled=true;this.form.submit()"> <INPUT type="submit" value="submit2" onclick="this.form.q.value=this.value;this.disabled=true;this.form.submit()"> <INPUT type="hidden" name="q" value="" > </FORM></BODY></HTML> ****************************************** という例があったため、この例に従って <SCRIPT TYPE="text/javascript">  </SCRIPT> <FORM action="buy.cgi" method="post" name="form1" id="form1"> <button class="button8" type="submit" value="300 onclick="this.form.q.value=this.value;this.disabled=true;this.form.sendform()">300購入</button> <button class="button8" type="submit" value="400" onclick="this.form.q.value=this.value;this.disabled=true;this.form.sendform()">400購入</button> <INPUT type="hidden" name="d4_buy" value="" > </FORM> としてみたのですが、うまく数値の引き渡しが出来ません。(NULL となります) どのように改造すればいいか教えてください。よろしくお願いいたします。
- 締切済み
- JavaScript
1つのform内に2つのsubmitボタンがあり、action属性がそれぞれで異なる場合
一般的な検索画面で、中身はjavaで作っているのですが、検索して結果が下に一覧で表示され、個々の結果ごとに「修正」「削除」ボタンを作っております。結果1つを1formとして囲っておりまして、hiddenに一意に識別できるパラメータをvalueを入れて飛ばして、その結果情報を修正できたり削除できたりする機能を作っております。修正ボタンをクリックした場合と削除ボタンをクリックした場合で呼ばれるServletが異なるのですが、うまくJavascriptを書けておりません。以下はソースです。ちなみにこの要素の上に検索ボタンがあり、現在の挙動だとなぜか検索条件入力フォームチェック用のJSが呼ばれてしまっております。FireFoxのプラグインに表示されるエラーには何もでませんでした。 *****JSP(view)側***** <form method="post" onSubmit="return callServlet(this)" id="mstSearchR" name="mstSearchR"> <input type="hidden" id="mdNoH" name="mdNoH" value="???????" /><br> <input type="submit" id="modify" name="modify" value="　変更　" />　<input type="submit" id="delete" name="delete" value="　削除　" /> </form> *****JS側***** function callServlet(caller){ caller.modify.onsubmit = function(){ flagD = this.form.modify.disabled; flag = confirm("修正しますか？"); if(flag == true){ flagD = !flagD; this.form.modify.disabled = flagD; this.form.action = "????????????????" return true; } return false; } caller.delete.onsubmit = function(){ flagD = this.form.delete.disabled; flag = confirm("削除しますか？"); if(flag == true){ flagD = !flagD; this.form.delete.disabled = flagD; this.form.action = "!!!!!!!!!!!!!!!!" return true; } return false; } }
- ベストアンサー
- JavaScript
submit()について
突然ですがアドバイスをお願いいたします。 <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> これで“Form1”内のNAMEが“aaaaa”とついたフォームの値を送信できますよね、ここで質問なのですが、例えばNAMEが“aaaaa”のフォームの他に NAMEが“bbbbb”というフォームがあったとして、 “aaaaa”と“bbbbb”の値を同時に送信したいときには、 <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> とこんな書き方でも大丈夫なのでしょうか？
- ベストアンサー
- JavaScript
ボタンを動的にdisabledさせたいのですが
お世話になります。ある画面に複数ボタンがあって押されたボタンをdisabledにしたいなと思っています。ただしどのボタンがおされても同じ関数に飛んでほしいのですがいまいち解決できません。 <form name="form"> <input type="button" name="syori1" value="ボタン1" onClick="javascript:hogehoge()"> <input type="button" name="syori2" value="ボタン2" onClick="javascript:hogehoge()"> <input type="button" name="syori3" value="ボタン3" onClick="javascript:hogehoge()"> </form > とあった場合 function hogehoge(){ document.form.ボタンの名前.disabled=true; } としたいのですが名前の部分は動的に変えることは可能なのでしょうか？普通に document.form.syori1.disabled=true; と書けば簡単なのですが、ボタンの数が決まっていないためボタン名を指定して書くことはできません。ボタン名は onClick="javascript:hogehoge(document.form.ボタンの名前.name)" で、送ることができるのは確認したのですが hogehoge(ボタンの名前) の方でどうやってdisabledのところに入れればいいか解りません。よろしくお願い致します。
- ベストアンサー
- JavaScript
javascript内からのsubmit
PHP初心者です。 javascript内でsubmitを行い、値をPHP内で受け取る想定ですが、うまく作動しません。具体的には下記のソースで、// Aの処理に入ってきて欲しいのですが、//B に入ってきます。初歩的なことのなのかもしれませんが、どこが間違っているのか分からずはまっています。ご教授ください。ソースは以下です。 ■JavaScriptとForm(admLogin.html) <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> <script type="text/javascript"> function fncLogin(){ $("#frmAdmLogin").submit(); } </script> <body> <form id="frmAdmLogin" action="admLogin.php" method="post"> <input type="text" id="txtAdmId" /> <input type="text" id="txtAdmPass" /> <input type="button" name="btnLogin" value="ログイン" onclick="fncLogin()"/> </form> </body> ■PHP（admLogin.php) <?php if(isset($_POST['btnLogin'])) { // A }else{ // B } ?> ログインボタン押下 ↓ fncLogin内からフォームをsubmit ↓ // A の処理に入ってくる想定なのですが、//B　の処理が実行される。ちなみに、ボタンのinput typeをsubmitにすれば//A の処理に入ってくるのですが、 javascript内からsubmitしたいため、困っています。どこを間違えているのでしょうか。。
- 締切済み
- PHP
formのボタンをsubmitしたときにアラート
javascript で、formのボタンをsubmitしたときにアラートが出るようにしたいと思います。下記のように作ってみましたが、うまく動きません。どのようにすれば動くでしょうか? ご教示いただきたくお願いいたします。 <script type="text/javascript"> function(){ $('form1').submit(function(){ $.ajax({ type: 'POST', data: postData, url: 'buy.php', success: function(data){alert("購入できました");} error: function(){alert('購入できませんでした。再度お試しください');} }); return false; }); } </script> <form name="form1" id="form1" method="POST" name="form1" value="form1" action="buy.php"> <input type="hidden" name="id" value="100" /> <input type="hidden" name="name" value="高橋" /> <input type="submit" value="Save"> <form/>
- ベストアンサー
- JavaScript

submitボタンの無効化処理について

submitボタンの無効化処理について