submitボタンの二重送信防止を実装したい

現在この投稿に設定したタグの技術を使ってログイン画面の実装をしています。

質問があるのですが、
結論から言うと、
submitボタンの二重送信防止を実装したいのですがどう実装すればいいでしょうか？

テキストボックスにカーソルがある場合などでもenterキーでのボタン押下を対応するために<input type="submit">を適用しています。
そうするとEnterを押すたびに、または押下するたびにsubmitされるので二重送信防止処理を入れたいです。

調べて、以下のコードのように一度submitするとdisabledにする処理を入れているのですが、実際に動かしてみるとうまくいきません。

submitボタンの二重送信防止の一般的な方法やアドバイスいただければと思います。
ちなみにユーザビリティ上Enterキーでの押下可能にしたいので<input type="button">ではなく、<input type="submit">で実装したいです。またスマホ対応も念頭に入れています。
どうぞ宜しくお願い致します。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>jQueryのsubmit()サンプル</title>
6<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
7</head>
8<body>
9<style>
10p {
11  font-size: 13px;
12}
13</style>
14<p>「送信」をクリックすると確認ダイアログが出ます。</p>
15<form action="" method="post">
16  <input type="text" name="textBox">
17  <input type="submit" name="send" id="submit">
18</form>
19<script>
20$(function() {
21  $('form').submit(function() {
22    //$("#submit").attr("disabled", true);  //disabledにならない
23    //$(this).find(':submit').attr('disabled', 'disabled');　//disabledにならない
24    //$(this).find(':submit').attr('visibility', 'hidden');　//disabledにならない
25    if (!confirm('送信しますか？')) {
26      return false;
27    }
28  });
29});
30</script>
31
32
33</body>
34</html>
35

追記
未だ非活性処理がうまくいっていません。
form属性にあるdata-disableがtrueになりません。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQueryのsubmit()サンプル</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
<body>
<style>
p {
  font-size: 13px;
}
</style>
<p>「送信」をクリックすると確認ダイアログが出ます。</p>
<form action="" method="post" data-disable="false">
  <input type="text" name="textBox">
  <input type="submit" name="send" id="submit">
</form>
<script>
$(function() {
  $('form').submit(function() {
    var form = $(this);
    if (form.data('disable')) {
   event.preventDefault();
 } else {
   form.data('disable', true);
 }
  });
});
</script>


</body>
</html>

追記２
先ほどの書き方でロジックはいけていたようです。
data-disableは開発ツールのElementsではtrueになりませんでした。
が、alertを追記してわかりやすくした結果、data-disableの値はちゃんと変わっていたようです。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>jQueryのsubmit()サンプル</title>
6<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
7</head>
8<body>
9<style>
10p {
11  font-size: 13px;
12}
13</style>
14<p>「送信」をクリックすると確認ダイアログが出ます。</p>
15<!doctype html>
16<meta charset="utf-8">
17<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
18<form action="" method="post" data-disable="false">
19  <input type="text" name="textBox">
20  <input type="submit" name="send" id="submit">
21</form>
22<script>
23  $(function() {
24    $('form').submit(function() {
25      var form = $(this);
26      // if (form.hasClass('mou-tsukaenai')) {
27      if (form.data('disable')){
28        event.preventDefault();
29        alert('このフォームはもう使えません');
30      } else {
31        // form.addClass('mou-tsukaenai');
32        form.data('disable', true);
33        // テストのため、通常の送信もキャンセルする
34        alert('送信しました');
35        event.preventDefault();
36      }
37    });
38  });
39</script>
40
41
42</body>
43</html>

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

回答1件

ベストアンサー

~~formにdisableをつけて、それをチェックするのがよいでしょう。スクリプトを、以下のように修正します。~~

javascript
1$('form').submit(function (event) {
2  var form = $(this);
3  if (form.attr('data-mou-tsukaenai')) {
4    // data-mou-tsukaenaiがついているなら、無視する。
5    event.preventDefault();
6  } else if (confirm('送信しますか？')) {
7    // 送信する。formにdata-mou-tsukaenai="1"をつける
8    form.attr('data-mou-tsukaenai', "1");
9  } else {
10    // 送信しない。まだsubmitできる。
11    event.preventDefault();
12  }
13});

~~これで、期待する動作になります。$(this)はsubmitが起こったformになります。~~

class を変更してチェックする方法を追記しました。そちらを使ってください。

以下は、試したコードが動かなかった理由です。

$("#submit").attr("disabled", true);  //disabledにならない

「#submitのボタンを押してsubmit」はできなくなります。しかし、Enterでのsubmitはできてしまいます。

$(this).find(':submit').attr('disabled', 'disabled');　//disabledにならない
$(this).find(':submit').attr('visibility', 'hidden');　//disabledにならない

これは、セレクタ :submit が正しくないため、何も変更しないのと同じです。

追記：「formの非活性」という状態はなく、属性値の変更で動作を止めることはできません。JavaScriptで送信を止めます。

こちらのサンプルで挙動を確認してください。
https://codepen.io/hoo-chan/pen/rdMZqa

html
1<!doctype html>
2<meta charset="utf-8">
3<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
4<form action="" method="post" data-disable="false">
5  <input type="text" name="textBox">
6  <input type="submit" name="send" id="submit">
7</form>
8<script>
9  $(function() {
10    $('form').submit(function() {
11      var form = $(this);
12      if (form.hasClass('mou-tsukaenai')) {
13        event.preventDefault();
14        alert('このフォームはもう使えません');
15      } else {
16        form.addClass('mou-tsukaenai');
17        // テストのため、通常の送信もキャンセルする
18        alert('送信しました');
19        event.preventDefault();
20      }
21    });
22  });
23</script>

投稿2018/03/17 09:25

編集2018/03/19 13:58

退会済みユーザー

総合スコア0

k499778

2018/03/17 10:38

回答ありがとうございます。enter押下を考慮に入れる場合buttonではなく、formをdisabledにするのですね。試してみます。

退会済みユーザー

2018/03/17 11:21 編集

ちょっとだけ違います。form に disabled を設定して、それを if (form.attr('disabled')) { の部分で設定されているかをチェックしているのがポイントです。ここでは disabled という単語に意味はなくて、mou-tsukae-naiyo とかにしても大丈夫です。

k499778

2018/03/17 15:24 編集

試してみましたが、非活性になりません。アドバイス頂けないでしょうか？投稿に追記致します。

退会済みユーザー

2018/03/17 15:37 編集

回答に追記しましたので、ご確認ください。attrではなく、classを付ける方法にしています。

k499778

2018/03/17 15:42

ありがとうございます。挙動を確認することができました。ちなみになのですが、data属性を使ってもできると思っていたのですが、なぜうまくいっていないのでしょう？もしご存知であれば教えていただければと思います。

退会済みユーザー

2018/03/17 15:49

data-disableを使うなら、スクリプトの方もdata-disableにすれば良いと思います。どちらの方法も「formを無効にしている」よりは「送信しようとしたらスクリプトでそれを止めている」が正しい認識です。