フォーム：イベントとメソッド submit

submit イベントは、フォームが送信されるとトリガーされます。通常は、サーバーに送信する前にフォームを検証したり、送信を中止してJavaScriptで処理したりするために使用されます。

メソッド form.submit() を使用すると、JavaScriptからフォーム送信を開始できます。動的に独自のフォームを作成してサーバーに送信するために使用できます。

それらの詳細を見ていきましょう。

イベント：submit

フォームを送信する主な方法は2つあります。

1. 1つ目は、<input type="submit"> または <input type="image"> をクリックすることです。
2. 2つ目は、入力フィールドで Enter キーを押すことです。

どちらのアクションも、フォームで submit イベントが発生します。ハンドラーはデータをチェックし、エラーがある場合はそれらを表示して event.preventDefault() を呼び出すことができます。そうすると、フォームはサーバーに送信されません。

以下のフォームで

1. テキストフィールドに移動して Enter キーを押します。
2. <input type="submit"> をクリックします。

どちらのアクションも alert を表示し、return false のためフォームはどこにも送信されません。

<form onsubmit="alert('submit!');return false">
  First: Enter in the input field <input type="text" value="text"><br>
  Second: Click "submit": <input type="submit" value="Submit">
</form>

<form onsubmit="return false">
 <input type="text" size="30" value="Focus here and press enter">
 <input type="submit" value="Submit" onclick="alert('click')">
</form>

メソッド：submit

フォームをサーバーに手動で送信するには、form.submit() を呼び出すことができます。

この場合、submit イベントは生成されません。プログラマーが form.submit() を呼び出す場合、スクリプトですでに関連する処理がすべて行われていると見なされます。

このようなフォームを手動で作成して送信するために使用される場合があります。

let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';

form.innerHTML = '<input name="q" value="test">';

// the form must be in the document to submit it
document.body.append(form);

form.submit();