フォームの二重送信の防止

フォームの二重送信の防止をするには、次のようにすることで実装可能です。

サンプルコード

JavaScript (ES5)

var formElem    = document.getElementById('sample-form'),
    btnElem     = document.getElementById('sample-submit-button'),
    submitCount = 0;

formElem.onsubmit = function() {
	if (submitCount === 0) {
		btnElem.disabled = true;
		submitCount++;
	} else {
		return false;
	}
};

JavaScript (ES6以降)

const formElem = document.querySelector('#sample-form'),
      btnElem  = document.querySelector('#sample-submit-button');

let submitCount = 0;

formElem.addEventListener('submit', function() {
	if (submitCount === 0) {
		btnElem.disabled = true;
		submitCount++;
	} else {
		return false;
	}
});

フォームのsubmit時にカウントを行い、カウントが0の場合にsubmitボタンをdisabledに、カウントを1足します。
カウントが0を超える時は、戻りをfalseにすることでsubmitを無効にします。

JavaScript逆引きリファレンス一覧へ戻る