PHPを使ったフォームでダブルクリックによる2重送信を防止する方法

最近仕事で触ったECサイトの注文フォームで、注文確定ボタンをダブルクリックすると注文メールが2通送信されてしまう問題に遭遇した。

その時に使ったjQueryコードを備忘録としてメモしておく。

// ダブルクリックによる2重送信防止
$(function(){
	$('input[type="submit"]').on('click', function(){
		$(this).prop('disabled', true);
		$(this).closest('form').submit();
	});
});

送信ボタンクリック時のfunctionを定義し、まず4行目でクリックされた直後、送信ボタンを表す$(this)に対しdisabled属性を与えボタンを無効化させる。

次に5行目、closestメソッドで送信ボタンから一番近いformを取得し、submit()を実行する。

これで送信ボタンが何度クリックされても、submit処理は一度しか走らないようになる。