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;
}

回答の条件
  • 1人2回まで
  • 登録:2008/02/09 14:56:04
  • 終了:2008/02/16 15:00:06

回答(2件)

id:GoldenDawn No.1

GoldenDawn回答回数426ベストアンサー獲得回数812008/02/09 16:52:39

ポイント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>
id:kt26

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


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

2008/02/10 01:13:37
id:t_shiono No.2

t_shiono回答回数256ベストアンサー獲得回数222008/02/10 17:58:16

ポイント35pt

こんにちは

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() ;
}

目的によってはちょっと冗長かもしれませんが。

何かの参考になれば。

id:kt26

GoldenDawnさんの案1では、何回もボタンをクリック出来てしまうんです。


t_shionoさんの方法だと上手くできるのですが、「aタグあり/なしに切り替えている」ので、同じIMGタグがありますし、ソースも増えてしまいます。


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

2008/02/10 18:37:07
  • id:KUROX
    http://www.openspc2.org/reibun/javascript/form/002/
    フラグ変数を1つ使ったほうが簡単だと思います。

    -------
    document.reqForm.formSbm.disabled = true;
    これで、Aタグを非活性にしてるつもりだと思うのですが、
    実際には、そういう動作はしないと思います。
  • id:kt26
    コメントでいただいた先のURLの方法を試していますが、
    <input type="submit">
    の、ボタンならalertが表示し、上手くできますが
    aタグを使った、submit送信の場合、上手くできません。

    あくまでも、Javascriptの送信+二重送信の防止が出来ればと思っています。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません