フォーム送信の検知
submit preventDefault FormData
フォームの送信イベントをJavaScriptで制御し、ページ遷移なしの非同期送信や入力値の処理を行います。
デモ：フォーム送信
コード例
js
const form = document.querySelector('form');
form.addEventListener('submit', async (e) => {
// ページ遷移（デフォルト動作）をキャンセル
e.preventDefault();
// FormData で入力値を一括取得
const data = new FormData(e.target);
const name = data.get('name'); // input[name="name"]
const email = data.get('email');
// Object変換
const obj = Object.fromEntries(data.entries());
console.log(obj); // { name: "...", email: "..." }
// fetch でAPI送信
try {
const res = await fetch('/api/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(obj),
});
if (!res.ok) throw new Error('送信失敗');
const result = await res.json();
showSuccess(result);
} catch (err) {
showError(err.message);
}
});
// submit ボタンでなくEnterキーでの送信も検知される
// type="button" にすると form送信はトリガーされない比較：FormData 送信 vs JSON 送信
| 観点 | FormData（multipart） | JSON |
|---|---|---|
| ファイル送信 | ✅ 対応 | ❌ 不可（Base64化が必要） |
| Content-Type | 自動設定（multipart/form-data） | 手動設定必要 |
| ネストデータ | △ 難しい | ✅ 簡単 |
| 推奨場面 | ファイルアップロード、HTMLフォームそのまま | APIとのデータ送受信 |
NEWe.submitter（押されたボタンを特定）
フォームに複数の送信ボタンがある場合、どのボタンが押されたかを e.submitter で取得できます。
js
form.addEventListener('submit', (e) => {
e.preventDefault();
// どのボタンが押されたか特定
const submitter = e.submitter;
console.log(submitter.name); // ボタンのname属性
console.log(submitter.value); // ボタンのvalue属性
if (submitter.name === 'save') {
saveDraft();
} else if (submitter.name === 'publish') {
publish();
}
});
// HTML例
// <button type="submit" name="save">下書き保存</button>
// <button type="submit" name="publish">公開</button>jQueryで書くとこうなる
jQueryでは
.on('submit') でフォーム送信を検知し、return false または e.preventDefault() でデフォルト動作を止めていました。バニラJSでは addEventListener('submit') と event.preventDefault() で同等の処理が可能です。js
// フォーム送信の検知
$('#myForm').on('submit', function (e) {
e.preventDefault();
console.log('送信された');
});
// return false でデフォルト動作を止める（jQueryのみの書き方）
$('#myForm').on('submit', function () {
// 処理
return false;
});
// 入力値の取得
$('#myForm').on('submit', function (e) {
e.preventDefault();
const name = $('#name').val();
const email = $('#email').val();
console.log(name, email);
});
// フォームのリセット
$('#myForm')[0].reset();
// プログラムからの送信
$('#myForm').trigger('submit');💡 上記のデモは、バニラJS（ブラウザ標準API）です。
🤖 AIプロンプトテンプレート
以下の要件を満たすTypeScript + Reactコンポーネントを作成してください。 - フォームのsubmitイベントとevent.preventDefault()を使ったバリデーションのサンプルを示す - 必須チェック・形式チェック（メール・電話番号）のバリデーション例を含める - リアルタイムバリデーション（入力中にエラー表示）のサンプルを含める - フォーム送信前の確認ダイアログと送信中のローディング状態の例を示す - バリデーションエラーをユーザーにわかりやすく表示するUIのサンプルを含める - コメントは日本語で記述する
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。