onsubmit

onsubmitの基本的な使い方

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

以下は、利用例です。

<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.onsubmit = func1;
</script>

赤字部分は、1行目で指定したIDをxにオブジェクトで登録しています。また、2行目のx.onsubmitによって、xオブジェクトの実行ボタンやエンターキーが押された時、関数func1を呼び出すようにしています。

関数func1内の青字部分は、ページがリロードされるのを防ぎます。

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

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

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

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

<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.onsubmit = func1;
</script>

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

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

HTMLの属性として記述する(非推奨)

onsubmitは、HTMLの属性としても記述できます。

<form onsubmit="alert('テストです');return false;">
<input type="text">
<button type="submit">実行</button>
</form>

formタグで、onsubmit属性によってalertを実行しています。これでも、同じ動作をします。

属性で記述する方法は、以前は多く使われていましたが、今では非推奨になっています。新しくスクリプトを作る時は、これまで説明したプロパティ(x.onsubmitなど)で記述するか、イベントリスナーを使って記述がお薦めです。

ブラウザのサポート状況

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

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

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