ダブルサブミット防止(submit();関数でonsubmitハンドラを呼ぶ)

javascript

通常のbuttonやanchorでも簡単にダブルサブミットを防止する方法。

onsubmit関数は

input type="submit"
input type="image"

をクリックした際にしか呼ばれません。
javascriptから、submit();関数を使用した場合は呼ばれません。

ダブルサブミット防止には、いくつか方法が考えられます。

1.ボタンやformをdisabledする方法(setTimeoutを使用等)
2.フラグを利用する方法
3.サーバ側でTransactionTokenチェック

2.の方法はかなり簡単に実装出来ますが、javascriptのsubmit()関数では
onsubmitイベントハンドラが呼ばれない為
通常のボタンやアンカーでは使用出来ません。


そこで、ダミーのsubmitボタンをクリックする方法で簡単に実現します。
画面に表示しないダミーのsubmitボタンを用意して
それをクリックする事でonsubmit()が呼ばれるように細工します。

<html>
<head>
<title>test</title>
<script>
var submitted = false;
function submitfunc(){
  if(submitted){
    alert('送信中');
    return false;
  }else{
    submitted = true;
    return true;
  }
}
function submitForm(){
  var f = document.forms[0];
  //f.submit(); // <= これだとonsubmit()が呼ばれない
  f.dummyBtn.click(); // <= submitをクリック
}
</script>
</head>
<body>
<form onsubmit="return submitfunc();" method="post" action="http://hoge.google.com">
<input type="submit" value="submit button"/><br/>
<input type="image" alt="submit image"/><br/>
<hr/>
<input type="button" value="normal button" onclick="submitForm();"/><br/>
<a href="#" onclick="submitForm();">test anchor</a>
<span style="display: none;">
 <input type="submit" value="dummy" id="dummyBtn" name="dummyBtn" />
</span>
</form>
</body>
</html>

この方法を使うと、画面上の全てのボタン、画像、アンカーのクリックにおいて
onsubmitハンドラが呼ばれるようになるので、2重送信が検出可能となります。


TeedaやS2JSFにもダブルサブミット防止を考えていますが
サーバ側のTransactionTokenとクライアント側での抑止の両方が出来ればといいなぁｗ