Webフォームを使用する際、ユーザーが同じフォームを二重に送信してしまうことは、データの重複やサーバーの負担増加といった問題を引き起こします。この記事では、JavaScriptを使ってフォームの二重送信を防ぐ方法を紹介します。
基本的な対策：送信ボタンの無効化
最も基本的な方法は、フォーム送信時に送信ボタンを無効化することです。これにより、ユーザーは同じフォームを複数回送信することができなくなります。以下はその具体的な実装例です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Double Submit Prevention</title>
<script>
function preventDoubleSubmit(form) {
// 送信ボタンを無効化する
form.querySelector('button[type="submit"]').disabled = true;
return true;
}
</script>
</head>
<body>
<form onsubmit="return preventDoubleSubmit(this);">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<button type="submit">Submit</button>
</form>
</body>
</html>サーバーサイドでの追加対策
クライアントサイドでの対策だけでは不十分な場合もあります。サーバーサイドで二重送信をチェックすることで、さらに安全性を高めることができます。例えば、CSRFトークンを使用して送信の正当性を確認する方法があります。
AJAXリクエストを利用した対策
もう一つの効果的な方法として、フォーム送信をAJAXで行う方法があります。AJAXを使用すると、送信中にボタンを無効化し、送信完了時に再度有効化することができます。以下はその実装例です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Double Submit Prevention with AJAX</title>
<script>
function preventDoubleSubmit(form) {
var submitButton = form.querySelector('button[type="submit"]');
submitButton.disabled = true;
var xhr = new XMLHttpRequest();
xhr.open("POST", form.action, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 成功時の処理
console.log('Form submitted successfully.');
submitButton.disabled = false; // 必要に応じて再有効化
} else if (xhr.readyState === 4) {
// エラー時の処理
console.error('Form submission failed.');
submitButton.disabled = false; // エラーの場合は再有効化
}
};
var formData = new FormData(form);
var urlEncodedData = new URLSearchParams(formData).toString();
xhr.send(urlEncodedData);
return false; // 通常のフォーム送信をキャンセル
}
</script>
</head>
<body>
<form onsubmit="return preventDoubleSubmit(this);" action="/submit-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<button type="submit">Submit</button>
</form>
</body>
</html>まとめ
二重送信を防ぐためには、クライアントサイドでのボタン無効化や、サーバーサイドでのトークンチェック、さらにAJAXを利用した送信方法など、複数の方法があります。これらの方法を組み合わせることで、より安全で効率的なフォーム送信を実現できます。ぜひ、自分のプロジェクトに合った方法を取り入れてみてください。
