読者です 読者をやめる 読者になる 読者になる

【javascript】ダブルサブミット防止

javascript

formがクリックされたあと、処理が終了するまで大分かかってしまい、何度もクリックされる事を回避する必要がありました。
そこで、色々検索をかけているうちに、「ダブルサブミット」という言い方をすることを知り(情弱…)、javascriptのソースがあったので使ってみました。
参考サイトに載っているソースはこれだけです。

<script>
   function DisableButton(b)
   {
      b.disabled = true;
      b.value = ’Submitting’;
      b.form.submit();
   }
</script>

<p>
   Click the button to see how it can be disabled and
   have its text changed when clicked...
</p>

<p>
   <input type="submit" name="SubmitButton" id="SubmitButton"
          value="Submit"
          onclick="DisableButton(this);" />
</p>

最低限必要なのは、scriptタグ内とinputタグ内のonclick="DisableButton(this);"です。
b.valueに代入された文字列が、ボタンクリックされたあとのボタンの文字列になるため、"送信中です"などに変更するとさらに分かりやすそうです。

javascriptでこんなことまで出来るんですね…

参考サイトでは他の方法も載っていたので、後で参考にしてみたいと思います。

参考サイト

http://japan.internet.com/developer/20070116/27.html


jqueryでもあるようです。
http://neta.ywcafe.net/001046.html
最初にこっちを見つけたため、やってみていたのですが‥
なぜかうまく行かなかったので、先に述べた方を利用しました。