2度押し防止のJavascript

前へ 次へ
このQ&Aのポイント
  • ボタンを押すと出てくる購入リストを連続で押せないようにする
  • 連続買いの防止のためのJavascriptの書き方がわからない
  • 現状ではボタンの2度押し防止は機能しているが、連続買いができる状態
回答を見る
  • ベストアンサー

2度押し防止のJavascript

先日、「買い」のボタンを押すと、100購入～800購入までがずらりと出てくるJavascriptをこちらでお教えいただきました。(ONEONE様　有難うございます) その際、「買いのボタン」の2度押し防止スクリプトも同時に組んでいただきました。 それが末尾のスクリプトになります。 質問 買いボタンの2度押し防止は出来ていますが、100購入　200購入　300購入の連続買いができてしまう状況です。 この連続買いの防止のjavascriptをご教示いただければと思います。 当方は、 <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); $("#b_btn").click(function (e) { $(this).prop("disabled", true); }); }); </script> としてみたのですが、うまく行きませんでした。よろしくお願いいたします。 *************************************************************************** 現状 (買いボタンの2度押し防止は機能しているが 　　　　100購入　200購入の連続買いができる状態) *************************************************************************** <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <form action="abc.cgi" method="post" name="form1" id="form1"> <button id="btn0">買い</button> <div id="kai" style="display:none"> <button id="b_btn" type="submit" name="b100" value="100">100購入</button><br> <button id="b_btn" type="submit" name="b200" value="200">200購入</button><br> <button id="b_btn" type="submit" name="b300" value="300">300購入</button><br> <button id="b_btn" type="submit" name="b400" value="400">400購入</button><br> <button id="b_btn" type="submit" name="b500" value="500">500購入</button><br> <button id="b_btn" type="submit" name="b600" value="600">600購入</button><br> <button id="b_btn" type="submit" name="b700" value="700">700購入</button><br> <button id="b_btn" type="submit" name="b800" value="800">800購入</button><br> </div> </form> <BR> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); }); </script> ***********************************************************************

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

  • ベストアンサー
  • ONEONE
  • ベストアンサー率48% (279/575)
回答No.3

すいません、きちんとテストせずに回答してしまいましたね。 結果として、disableするとsubmitで値が送信されないので hidden要素を追加してそこにデータを入れて送信するようにしてはいかがでしょう。 あまりエレガントではないかもしれません。 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head> <body> <form action="" method="post" name="form1" id="form1"> <button id="btn0">買い</button> <div id="kai" style="display:none"> <button type="submit" name="b100" value="100">100購入</button><br> <button type="submit" name="b200" value="200">200購入</button><br> <button type="submit" name="b300" value="300">300購入</button><br> <button type="submit" name="b400" value="400">400購入</button><br> <button type="submit" name="b500" value="500">500購入</button><br> <button type="submit" name="b600" value="600">600購入</button><br> <button type="submit" name="b700" value="700">700購入</button><br> <button type="submit" name="b800" value="800">800購入</button><br> <input id="data" type="hidden" name="data" value=""> </div> </form> <BR> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); $("#kai > button").click(function (e) { e.preventDefault(); $('#data').val($(this).val()); //hidden要素のvalueに押下buttonのvalueを挿入 $("#kai > button").prop("disabled", true); //すべての購入ボタンを非活性 $("#form1").submit(); }); }); </script> </body> </html>

tajix14
質問者

お礼

出来ました!! 感激です!! 助かりました!! 本当にありがとうございました!! 感謝です!! <button id="btn0">買い</button> <div id="kai" style="display:none"> <button type="submit" name="volume" value="100">100購入</button><br> <button type="submit" name="volume" value="200">200購入</button><br> <button type="submit" name="volume" value="300">300購入</button><br> <button type="submit" name="volume" value="400">400購入</button><br> <button type="submit" name="volume" value="500">500購入</button><br> <button type="submit" name="volume" value="600">600購入</button><br> <button type="submit" name="volume" value="700">700購入</button><br> <button type="submit" name="volume" value="800">800購入</button><br> </div> <input id="data" type="hidden" name="volume" value=""> </form> <BR> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); $("#kai > button").click(function (e) { e.preventDefault(); $('#data').val($(this).val()); //hidden要素のvalueに押下buttonのvalueを挿入 $("#kai > button").prop("disabled", true); //すべての購入ボタンを非活性 $("#form1").submit(); }); }); </script>

その他の回答 (2)

  • ONEONE
  • ベストアンサー率48% (279/575)
回答No.2

どういう動きが正解かわかっていないです。 １００購入、２００購入などのボタンは一つだけ選んだらsubmitで 他のボタンは押せないようにしたい？ でしたら、下記のように $("#kai > button").click(function (e) { e.preventDefault(); //通常の動作を停止 $("#kai > button").prop("disabled", true); //すべての購入ボタンを非活性 $(this).submit(); //submit }); > $("button8")としたところ、submitは出来ましたが、連打も出来てしまいます。 クラスのセレクタは$(".button8")とドットが必要です。

tajix14
質問者

お礼

本当にありがとうございます。 初めて「1つのボタンを押すと全体が全ボタンがdisableとなることを経験しました!! 感激しました!」 ただ、大変申し訳ございませんが、その状態ではやはりsubmitができませんでした。 一行づつ消しながらテストした結果が下記のとおりです。 e.preventDefault(); または $("#kai > button").prop("disabled", true); のいずれかの記載があると、submitができないようです。 ****************************************** $("#kai > button").click(function (e) { e.preventDefault(); //通常の動作を停止 $("#kai > button").prop("disabled", true); //すべての購入ボタンを非活性 $(this).submit(); //submit }); }); </script> および $("#kai > button").click(function (e) { //e.preventDefault(); //通常の動作を停止 $("#kai > button").prop("disabled", true); //すべての購入ボタンを非活性 $(this).submit(); //submit }); Submit 不可　　　連打不可 ******************************************** $("#kai > button").click(function (e) { e.preventDefault(); //通常の動作を停止 //$("#kai > button").prop("disabled", true); //すべての購入ボタンを非活性 $(this).submit(); //submit }); }); </script> Submit 不可　　　連打可 ******************************************* $("#kai > button").click(function (e) { //e.preventDefault(); //通常の動作を停止 //$("#kai > button").prop("disabled", true); //すべての購入ボタンを非活性 $(this).submit(); //submit }); //$("#kai > button").click(function (e) { //e.preventDefault(); //通常の動作を停止 //$("#kai > button").prop("disabled", true); //すべての購入ボタンを非活性 //$(this).submit(); //submit //}); Submit 可　　　連打可 ******************************************* あと少しのような気がしています。 本当にご迷惑をおかけし大変申し訳ございませんが、あと一声のアドバイスをお願いいたします。

  • ONEONE
  • ベストアンサー率48% (279/575)
回答No.1

idはひとつの画面でユニークとなるように設定します。 複数の要素で同一のものを使う場合はclassを設定してください。 修正としてはid="b_btn"を消して以下を追加すればよいでしょう。 セレクタはidがkaiである要素の直下にあるbuttonタグを指定しています。 $("#kai > button").click(function (e) { e.preventDefault(); $(this).prop("disabled", true); });

tajix14
質問者

お礼

ありがとうございます。 id="b_btn"を消して下記にしてみました。 <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); $("#kai > button").click(function (e) { e.preventDefault(); $(this).prop("disabled", true); }); }); </script> 結果としては、submitができませんでした。 試しに<button class="button8"　とし、 $("#kai > button") を $("button8")としたところ、submitは出来ましたが、連打も出来てしまいます。 どこか誤りが御座いますでしょうか? 何度もお手数をおかけして申し訳ございません。 よろしくお願いいたします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptでinput属性の入力

    複数のボタンがあります。 それぞれのボタンによって、value値を変えたいと考えています。 通常であれば <button class='button' type='submit' name='volume' value='350'>350購入</button> <button class='button' type='submit' name='volume' value='450'>450購入</button> という形を利用しますが、理由があり、 type='submit' を使用できません。 そこで、 <input id="button350" type="button" value="350購入" /> <input id="button450" type="button" value="450購入" /> というsubmit属性の無いボタンを使用しながら、「javascriptを使いname value を抽出しsubmitまで持っていく」ことを考えています。 そこで、下記のようなものを2種類(350と450は別の記載方法でテスト)作ってみましたが、いずれもsubmitは出来ますが、value値を渡すことが出来ません。 どのように書けば、name属性にvalue値を渡すことが可能でしょうか? <form action="abc.php" method="post" name="form2" id="form2"> <script> $(function(){ $('#button350').click(function() { $('input[type=\'submit\']'); $('input[name=\'volume\']'); $('input[value=\'350\']'); $('#form2').submit(); }); $('#button450').click(function() { $('input[type=\'submit\'],[name=\'d4_buy_stock_volume2\'],[value=\'450\']'); $('#form2').submit(); }); }); </script> <BR> <BR> <input id="button350" type="button" value="350購入" /> <BR> <input id="button450" type="button" value="450購入" /> </form>

  • AJAXで新規表示されたボタンが稼働しない

    下記のようなものを作りました。 1 通常は下記のような　<100購入>というボタンが表示されています。 <button class="button8" type="submit" name="volume" value="100">100購入</button> 2 <追加表示ボタン>を押すと、 <button class="button8" type="submit" name="volume" value="500">500購入</button>という<500購入>ボタンが新たに追加されます。 3 <100購入>ボタンか<500購入>ボタンを押すと、お好きな数値が購入できます。 前提条件 <100購入>ボタンは、当初から<form></form>内に直接記載されているボタンです。 <500購入>ボタンは、<追加表示ボタン>を押した際、AJAXにより、<form></form>内に新たに設置されるボタンです。 問題点 <100購入>ボタンは問題なく稼働します。 しかしながら、AJAXにより新たに設置された<500購入>ボタンを押しても、Formが稼働しません。 どのようにすれば、AJAXにより新たに設置された<500購入>ボタンが稼働するようになるでしょうか? よろしくお願いいたします。 +++++++++++++++++++++++++++++++++++++++++++++++++++ 当方が作ったソース <script type="text/javascript" src="./js/jquery.js"></script> <form action="abc.cgi" method="post" name="form1" id="form1"> <div id="msg">ここへ出力</div> <button class="button8" type="submit" name="volume" value="100">100購入</button </form> <BR> <button id="btn0">追加表示</button> <script type="text/javascript"> jQuery(function($){ $("#btn0") .click(function () { $.ajax({ beforeSend:function(BTN){ $("#msg").append("<BR>新規ボタンを表示します<BR>"); }, complete: function (BTN, textStatus) { $("#msg").append("<button class=\"button8\" type=\"submit\" name=\"volume\" value=\"500\">500購入</button><BR>"); } }); }); }); </script>

  • 複数ボタンを制御出来る2度押し防止ボタン

    HTML5+CSS3でゲームを作っています。 フォームがあり、ボタンが複数並んでいます。 <SCRIPT TYPE="text/javascript"> <!-- function sendform(){ submitForm(); } function submitForm(){ document.form1.submit(); } // --> </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"> <!-- function sendform(){ submitForm(); } function submitForm(){ document.form1.submit(); } // --> </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 となります) どのように改造すればいいか教えてください。 よろしくお願いいたします。

  • 2つのjavascriptを組み合わせたい

    フォームメール用の2つのjavascriptがあります。 ●2重送信防止とデータ送信後指定ページへ遷移するjavascript ●テキストボックスが空欄だった時にアラートを表示するjavascript の2つです。 この2つを組み合わせようとしたのですが、うまく動きません。 ご指導いただきたくお願いいたします。 *************************************************** 【●2重送信防止とデータ送信後指定ページへ遷移するjavascript】【動きます】 送信ボタン押下後、2重送信を防止しながら、データ送信後は「location.href = "finish.html"」でfinish.htmlを表示します。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { // HTML送信キャンセル event.preventDefault(); //フォーム要素取得 var $form = $(this); // 送信ボタンを取得 // （後で使う: 二重送信防止） var $button = $form.find('button'); // 送信 $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, // 送信前 beforeSend: function(xhr, settings) { // ボタン無効二重送信防止 $button.attr('disabled', true); }, // 応答後 complete: function(xhr, textStatus) { // ボタン有効再送信許可 $button.attr('disabled', false); }, // 通信成功処理 success: function(result, textStatus, xhr) { // 入力値初期化 $form[0].reset(); location.href = "finish.html"; }, // 通信失敗処理 error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信A"> </form> *************************************************** 【●テキストボックスが空欄だった時にアラートを表示するjavascript】【動きます】 テキストボックスが空欄だったらアラートを表示します。 <script> function check3() { 　　var tel3 = document.form1.tel.value; 　　var fax3 = document.form1.fax.value; 　　var isValid = true; 　　if (!tel3) { 　　　　alert("電話未入力"); 　　　　isValid = false; 　　} 　　if (!fax3) { 　　　　alert("FAX未入力"); 　　　　isValid = false; 　　} 　　if (!isValid) { 　　　　return; 　　} 　　document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form> *************************************************** 【上記の2つを組み合わせてみました。】【動きません】 テキストボックスが空欄だったらアラートを表示しながら2重ボタン排除&finish.htmlに遷移というものです。 【結果】 「問題なく動くjavascript」2つを単純に組み合わせただけなのですが、 finish.htmlに遷移せずinsert.phpが表示されます。ご指導宜しくお願いします。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { event.preventDefault(); var $form = $(this); var $button = $form.find('button'); $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, beforeSend: function(xhr, settings) { $button.attr('disabled', true); }, complete: function(xhr, textStatus) { $button.attr('disabled', false); }, success: function(result, textStatus, xhr) { $form[0].reset(); location.href = "finish.html"; }, error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <script> function check3() { 　　var tel3 = document.form1.tel.value; 　　var fax3 = document.form1.fax.value; 　　var isValid = true; 　　if (!tel3) { 　　　　alert("電話未入力"); 　　　　isValid = false; 　　} 　　if (!fax3) { 　　　　alert("FAX未入力"); 　　　　isValid = false; 　　} 　　if (!isValid) { 　　　　return; 　　} 　　document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form>

  • 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
  • 2度押し防止ボタン

    HTML5 + CSS3 でスマートフォンゲームを作っています。 回線が混雑している状況でボタンを2度押ししても1回しかカウントされないボタンを作りたいと考えています。 【基本的な知見】 下記であれば要望に沿ったボタンになります。(ボタンはCSS3の標準ボタンを使用) <form action="form.cgi" method="post"> <input type="hidden" name="point" value="1" /> <SCRIPT TYPE="text/javascript"> <!-- //submitの2度押し防止 function disableButton(){ document.form1.button1.disabled = true; submitForm(); } function submitForm(){ document.form1.submit(); } // --> </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のソースコード教えてください。

    JavaScriptで下記はボタンではなく画像でリンク先が出現するソースを実現したいです。 <script type="text/javascript"などでjsファイルを読み込むような感じでもいいです。 ここまでがjsファイルでここまでがhtmlと言うように分けて記述してもらえると助かります。 <html> <head> <title>oooのページ</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script language="javascript"> <!-- function next(){ location.href="ttp://www.ooo.jp/ooo/123456"; } function Check() { var obj = document.getElementById("agreement"); if(obj.scrollTop + obj.clientHeight >= obj.scrollHeight - 1) { document.form1.submit1.disabled = false; document.form1.submit1.focus(); } } //--> </script> </head> <body bgcolor="#FFFFFF" text="#000000"> <table width="500" border="0" cellspacing="0" cellpadding="5"> <tr> <td align="center" bgcolor="#999999"><font color="#000000"><b>ご利用規約</b></font></td> </tr> <form name="form1" action="" method="post"> <tr> <td align="center"> <div id=agreement style="width:400px; height:100px; overflow: scroll; border:1px solid gray;" onScroll="Check()"> テキスト<br> テキスト<br> テキスト<br> テキスト<br> テキスト<br> テキスト<br> </div> <input type="button" value="依頼する" name="submit" id="submit1" disabled onClick="next()"> <input type="submit" value="キャンセル" name="submit2" id="submit2"　onclick="history.back()"> </td> </tr> </form> </table> </body> </html>

  • ボタンを押すとデータ表示、再度押すと非表示

    ボタンを押すとデータが表示されるjqueryを利用したjavascriptがあります。 このボタンを再度クリックすると非表示にしたいと考えています。 奇数回クリック=表示 偶数回クリック=非表示 という形です。 ご教授いただきたくお願いいたします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#data").show(); }); </script> <button class="button18" id="btn0">ボタン</button> <div id="data" style="display:none"> データ </div>

  • 複数のsubmitボタンで押されたボタンを取得する方法

    form内の、submitボタンの値が拾えません。 １つだけsubmitボタンを設置すると値が拾えますが、 ２つ以上submitボタンを設置すると拾えません。 仕様上、無理なのでしょうか？ <SCRIPT language="JavaScript"> function move_post(){ alert(document.frmMvPost.btn.value); } </SCRIPT> <FORM name="frmMvPost" action="" method="post" onsubmit="return move_post()"> <INPUT type="submit" name="btn" value="テスト1"> <INPUT type="submit" name="btn" value="テスト2"> <INPUT type="submit" name="btn" value="テスト3"> </form>

  • フォームボタンのvalueを渡すにはどうしたらいいのでしょうか？

    下記のソースのように「word」というテキストフィールドの 入力チェック後ボタンのvalueをword.phpに渡したいのですがどのようにしたらいいのでしょうか？ 入力チェックをせず input type="button"ではなくinput type="submit" にするとword.phpに渡せるのですが・・・ ようはＡ、Ｂ、Ｃそれぞれのボタンを押した時で word.phpでbtnのvalueをPOSTで受け取り 処理をvalue A、B、Cで分岐させたいんです。 よろしくお願いします。 <html> <head> <SCRIPT language="JavaScript"> <!-- function chk(chkfrm){ var tmp = chkfrm.word.value.length; if(tmp > 50 ){ alert("文字数が多すぎます"); } else{ chkfrm.submit(); } } //--> </SCRIPT> </head> <body> <form name="form" method="post" action="word.php"> <input name="word" type="text" id="word"> <input type="button" name="btn" value="A" onclick="chk(this.form);"> <input type="button" name="btn" value="B" onclick="chk(this.form);"> <input type="button" name="btn" value="C" onclick="chk(this.form);"> </form> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する