submit

submitの基本的な使い方

イベントリスナーのsubmitは、実行ボタンをクリックした時に処理を実行できます。テキスト入力欄でエンターキーを押しても、同様に処理は実行されます。

以下は、利用例です。

<form id="test-submit">
<input type="text">
<button type="submit">実行</button>
</form>

<script>
function func1(event) {
  event.preventDefault();
  alert("テストです");
}

const x = document.querySelector("#test-submit");
x.addEventListener("submit", func1);
</script>

赤字部分でsubmitイベントを登録して、実行ボタンやエンターキーが押された時に関数func1を呼び出します。関数func1内の青字部分は、ページがリロードされるのを防ぎます。

実行例は、以下のとおりです。

実行ボタンをクリックしても、テキスト入力欄でエンターキーを押してもアラートが表示されます。

セレクトボックスでの使い方

セレクトボックスでの使い方です。

<form id="test-submit">
<select>
<option value=10>10</option>
<option value=20>20</option>
</select>
<button type="submit">実行</button>
</form>

<script>
function func1(event) {
  event.preventDefault();
  alert("テストです");
}

const x = document.querySelector("#test-submit");
x.addEventListener("submit", func1);
</script>

実行例は、以下のとおりです。

数字を選択しただけではイベント発生にはならず、実行ボタンをクリックするとアラートが表示されます。ラジオボタンやチェックボックスなども同じで、選択しただけではイベント発生にはなりません。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。