人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptでsubmit処理をしています。

以下のようなソースを書いているのですが、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;
}

●質問者: kt26
●カテゴリ:ウェブ制作
✍キーワード:Disabled JavaScript アドバイス クリック ソース
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● GoldenDawn
●35ポイント

案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>
◎質問者からの返答

案1の方法はあまり上手く行きませんね・・。


案2のボタンは良い方法ですが、「a要素にしたい」からそうしているわけで、見た目の問題だけじゃないんです。


2 ● t_shiono
●35ポイント

こんにちは

GoldenDawnさんの案1でも問題ないように思えるのですが、ひょっとして再クリックできてしまうというのは、フォームは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

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タグがありますし、ソースも増えてしまいます。


こちらは、目的としては出来ているので、参考とさせていただければと思います。ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ