ボタンを消したい（二度押し抑制）

質問

<form method="post" action="xxx">
<input type="text" name="a">
<input type="submit" name="submit" value="SEND">
<input type="submit" name="submit" value="BACK">
</form>

こういうソースがあります。
SENDボタンをクリックするとメールが送信されます。
BACKボタンをクリックすると入力画面に戻ります。

ここでSENDボタンを連打されるとメールが連続送信されてしまいます。
そうならないようにボタンをクリックした時２つのボタンを消してしまいたいのですが、どうすればよいでしょうか。

よろしくお願いします。

回答No.1

todo36 · ベストアンサー

<div id=buttonarea>
<input type="submit" name="submit" value="SEND">
<input type="submit" name="submit" value="BACK">
</div>

document.getElementById("buttonarea").style.display = "none";

googleで検索：javascript 二重送信

皆さん苦労しているようでね。
色々なアイディアがあって面白い。

お礼

回答ありがとうございました。
いろいろ試行錯誤してみました。

<form id="frm1">
<div id="btn1">
<input type="button" name="submit" value="SEND" onClick="BtnNone()">
<input type="submit" name="submit" value="BACK">
</div>
</form>

function BtnNone(){
btn1.style.display = "none";
frm1.submit();
}

としたら、ボタンは消えるのですが、FormがSubmitされません。
何故でしょう・・・？

回答No.3

LancerVII

こんばんは。
違う視点で、ボタンを押せなくするのは
どうでしょうか？

<script type="text/javascript">
<!--
　function offsButton(){
　　document.mailForm.sendButton.disabled = true;
　　return true;
　}
//-->
</script>
・
・
・
・
<form action="xxx" method="post" onSubmit="return offsButton();" name="mailForm">
<input type="submit" value="SEND" name="sendButton">
</form>

動作確認してませんがこれでいけるはずです。
disabledという属性をいじってあげれば押せなくしたり押せたりできるようになります。

お礼

回答ありがとうございました。
disabledは「もう押せないぞ」とアピールするには良い方法ですね。

回答No.2

MRT1452

ぱっと思いついたものは、隠しフィールドを利用してその値で制御するということができないかなと思いました。

※思いつきで書いてるので間違えてる可能性が高いです。

<SCRIPT type="text/javascript">
<!--
function CallSend(){
var flg = document.form.hf.value;
if (flg != "")
document.form.hf.value = "1";
document.form.action = "xxx";
document.form.submit();
return false;
}
}
// -->
</SCRIPT>

（中略）

<form method="post">
<input type="hidden" name="hf">
<input type="text" name="a">
<input type="button" name="send" value="SEND" onclic = "CallSend()">
<input type="button" name="back" value="BACK" onclic = "Back()">
</form>

ボタンをクリックすることで、スクリプトを呼び出し、
そこから送信プログラムにキックをかけるという方法になってくるかなと。
で、初回ボタンを押したときにフラグを立てて、
２回目以降はフラグをチェックして送信処理を起こさせないと言う形。

ただ、Submitがあるので、そのときにセットしたフラグかクリアされてしまうかも。

こうなってしまうと上のは役立たずになってしまいますね^^;

onloadを利用して自分自身にフラグの値を渡すという
処理が必要になるかも。

お礼

回答ありがとうございました。
初心者で色々勉強中です。
いろんなやり方があるもんですね・・・。