サブミットの2重実行の挙動のルールについて

以下のようなhtmlがある場合、「送信」ボタンをクリックするとformタグで指定したactionが2度実行されます。
onclickに"return false;"を追加すると解消するのですが、気になったことがあります。

"return false;"を追加しない場合に、必ず2度実行されるわけではなく、1度きりしか実行されない場合があります。
この挙動は実行環境の運しだいで不安定なのでしょうか？
※IE11で確認しています。

html
1<script>
2  function foo(){
3    // 処理
4    bar.submit;();
5  }
6</script>
7
8<form name="bar" action="/xxx/Action">
9    <button onclick="foo();" >送信</button>
10</form>

行動規範の内容に同意します

回答3件

ベストアンサー

buttonタグはtype属性を指定しない限りsubmitがデフォルトで適用されます。そのため、type属性でbuttonなどを指定する必要があります。
また、処理中にもう一回クリックされてしまうなどユーザーのミスでそのような現象が起こっているかもしれないので、disabledプロパティを使ってクリックされた直後にボタンを無効化すると良いかもしれません。
以上のことをコードにすると、以下のようになります。ぜひ参考にしてください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6</head>
7<body>
8<script>
9    function foo() {
10        document.getElementById("btn").disabled = true;
11        bar.submit();
12        return false;
13    }
14</script>
15
16<form name="bar" action="">
17    <button id="btn" onclick="return foo();" type="button">送信</button>
18</form>
19</body>
20</html>