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度選択を無効にするためにはどうすればいいかアドバイスをお願いいたします。

回答No.2

LancerVII · ベストアンサー

こんにちは。

#1さんの回答で
>ありがとうございます。このひとつ目のソースが、submitボタン無しでsubmit出来る根幹の部分ですので外せません、
という補足がありますが、ソースを見た限りですとその通りで、はずしてみてください。

onchange="DisableButton(this);
のみにすれば希望の動きになると思います。

以下、理由

1.コンボボックスを洗濯する
2.onchangeイベントによりDisableButtonが呼ばれる
3.引数bに自分自身(select)が渡されるので、
　　b.dusabled = true; // これで選択できなくなる
4.フォームをsubmitする

という動きになります。

しかし、要素のdisabledをtrueにすると値が送信されなくなりますので以下のようにします。
function DisableButton ( b ) {
var h = document.createElement('input');
h.type = 'hidden';
h.name = b.name;
h.value = b.value;
b.form.appendChild ( h );
b.disabled = true;
b.form.submit;
}

選択されたら、動的に同じ名前のhidden要素を作成して、選択された値をセットし、
form内に追加することにより、disabledにした要素の値を送信することが出来ます。

わからないことがあったら補足ください。

お礼

ありがとうございました。
お陰さまで対応することが出来ました。
大変助かりました。
深く御礼申し上げます。

回答No.1

Picosoft

ちゃんとした検証はしていませんが、ソースを見ていて気になったところを。

> <select name="volume" onChange="this.form.submit()" onChange="DisableButton(this);">
この行ですが、1つめのonChangeは不要なのでは？

補足

ありがとうございます。このひとつ目のソースが、submitボタン無しでsubmit出来る根幹の部分ですので外せません、