こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

複数ボタンを制御出来る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 となります)

どのように改造すればいいか教えてください。

よろしくお願いいたします。

投稿日時 - 2014-01-19 16:16:37

QNo.8436960

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.4

CGIのPostDataを受け取るときもd4_buyで見てますか?

投稿日時 - 2014-01-21 12:00:43

補足

気にかけてくださり有難うございます。
>d4_buyで見てますか?
はい、そこは問題ありません。
動くものを作った後に小改良しています。

投稿日時 - 2014-01-21 21:06:36

ANo.3

転記ミスでなければ
this.form.q.value → this.form.d4_buy.value
(2箇所とも)


※余談ですがFromに内包できるSubmitはひとつだけだったはずです

投稿日時 - 2014-01-20 17:40:09

補足

有難うございます。
ご指摘の方法で対応してみましたがダメでした。
<INPUT type="hidden" name="d4_buy" value="" >
のvalue="" が優先されてしまうのかNULL=エラーになってしまいました。
難しいです.....

投稿日時 - 2014-01-20 23:02:28

ANo.2

>No.1補足

2つとも.disabled=trueすればいいのでは?

投稿日時 - 2014-01-19 18:22:46

補足

2つに別々のdisabledを設定してもそれぞれの連携がとれません。単独では機能しますが...
「ネットで調べたところ」のURLの記載されている質問と回答も同様のトラブルに対しての回答です。
この回答をベースに弄ったつもりです。
うまく使えればよかったのですが....

投稿日時 - 2014-01-19 18:39:14

ANo.1

わざわざ違う書き方をしなくても、これでいいのでは?

http://okwave.jp/qa/q8433104.html

投稿日時 - 2014-01-19 16:23:15

補足

有難うございます。
「1つのボタンの2度押し防止」であればURLのやり方でいいのですが、今回必要なのは複数のボタンに対して制御を掛けるものです。
URLの方式では、300ボタンの2度押しの制御は出来ても、300の次に400を押すという連続作業には無防備です。
よろしくお願いいたします。

投稿日時 - 2014-01-19 17:32:47