onsubmit/JavaScript

イベントハンドラのonsubmitについて説明します。

onsubmitの使い方

 onsubmitは、、実行ボタン(ボタンのタイプがsubmit)をクリックした時に処理を実行出来ます。例えば、アラートを表示する等です。テキスト入力欄でエンターキーを押しても同様に処理は実行されます。

 以下は、例です。

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

 赤字部分が実行される処理です。func1();等と関数を呼び出す事も出来ます。

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

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

セレクトボックスでの例

 セレクトボックスでの例です。

【セレクトボックスでの例】
<form onsubmit="alert('テストです');return false;">
<select>
<option value=10>10</option>
<option value=20>20</option>
</select>
<button type="submit">実行</button>
</form>

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

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

サポート

・サポートするブラウザ

 以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。

【サポートするブラウザ】
機種 ブラウザ サポート
パソコン Chrome
Safari
Firefox
Microsoft Edge
Internet Explorer
スマートフォン Chrome
Safari
Firefox

・サポートするタグ

 サポートするタグの一例は、以下の通りです。

 <form>

  • このエントリーをはてなブックマークに追加