jQuery でフォームの2重送信を禁止する方法

連続送信はサーバーサイド側でワンタイムトークンなどで禁止すれば良いと思いますが、クライアントサイドで複数のステップをしっかりと設けていないフォームでは誤って2回エンターキーを押してしまったりすると、データが送信されたのに関わらず、されたことがユーザーに分からなくなってしまうので、JavaScript 側で保険として2重送信を防止すると良さそうです。

1
2
3
4
5
6
$('form').submit(function() {
    $(this).submit(function () {
        alert('フォームからのデータ送信は一度ずつ行なって下さい。');
        return false;
    });
});

このようにすれば一度目の送信は許可して二度目の送信ではアラートを発生させつつ処理を終了させます。

コメント

コメントは受け付けていません。