以下のようなソースを書いているのですが、Submit用のボタン（画像）を押しても再クリック出来てしまいます。
二重送信させたくないのですが、どのような書き方をすればよいのでしょうか？
ソースの訂正・アドバイスいただければと思います。
▼フォームのソース
<form action="test.php" method="post" name="reqForm">
<a id="formSbm" href="javascript:formSubmit();"><img src="sbm_button.jpg"></a>
</form>
▼Javascriptのソース
function formSubmit(){
document.reqForm.submit();
document.reqForm.formSbm.disabled = true;
return false;
}
No.1
426
81
35pt
案1)
submit されたかどうかを管理する変数を追加する
submitted = false ; // Submit フラグ function formSubmit() { if (submitted == true) return ; submitted = true ; document.reqForm.submit() ; return false ; }
案2)
a 要素では disabled の値は無効なので button 要素に変えます。
見た目がボタンになるのが嫌ならスタイルシートで変更します。
<form action="test.php" method="post" name="reqForm"> <button id="formSbm" onclick="formSubmit();"><img src="sbm_button.jpg"></button> </form>
No.2
25622
35pt
こんにちは
GoldenDawnさんの案１でも問題ないように思えるのですが、ひょっとして再クリックできてしまうというのは、フォームはsubmitされなくても、リンクが存在しているだけで駄目ということでしょうか？
それであれば、以下のようなのはいかがですか？
HTML
<form action="test.php" method="post" name="reqForm"> <!-- サブミット前に表示 --> <div id="before" style="display: block"> <a id="formSbm" href="javascript:formSubmit();"><img src="sbm_button.jpg"/></a> </div> <!-- サブミット後に表示 --> <div id="before" style="display: none"> <img src="sbm_button.jpg"> </div> </form>
JavaScript
119
114
function formSubmit() {
// <a>タグ付きの<img>タグを非表示にする
document.getElementById('before').style.display = 'none';
// <a>タグなしの<img>タグを表示する
document.getElementById('after').style.display = 'block';
document.reqForm.submit() ;
}
目的によってはちょっと冗長かもしれませんが。
何かの参考になれば。
GoldenDawnさんの案1では、何回もボタンをクリック出来てしまうんです。
t_shionoさんの方法だと上手くできるのですが、「aタグあり/なしに切り替えている」ので、同じIMGタグがありますし、ソースも増えてしまいます。
こちらは、目的としては出来ているので、参考とさせていただければと思います。ありがとうございます。
KUROX
2008/02/09 15:14:52
kt26
1
1
案1の方法はあまり上手く行きませんね・・。
案2のボタンは良い方法ですが、「a要素にしたい」からそうしているわけで、見た目の問題だけじゃないんです。