submitの使い方
イベントリスナーのsubmitは、実行ボタン(ボタンのタイプがsubmit)をクリックした時に処理を実行出来ます。例えば、アラートを表示する等です。テキスト入力欄でエンターキーを押しても同様に処理は実行されます。
以下は、例です。
【submit利用例】
<form id="test-submit1">
<input type="text">
<button type="submit">実行</button>
</form>
<script>
function func1(event) {
event.preventDefault();
alert("テストです");
}
var x1 = document.getElementById("test-submit1");
x1.addEventListener("submit", func1, false);
</script>
赤字部分でsubmitイベントを登録しており、実行ボタンやエンターキーが押された時に関数func1を呼び出します。関数func1内の青字部分は、ページがリロードされるのを防ぎます。
実行例は、以下の通りです。
実行ボタンをクリックしても、テキスト入力欄でエンターキーを押してもアラートが表示されます。
セレクトボックスでの例
セレクトボックスでの例です。
【セレクトボックスでの例】
<form id="test-submit2">
<select>
<option value=10>10</option>
<option value=20>20</option>
</select>
<button type="submit">実行</button>
</form>
<script>
function func2(event) {
event.preventDefault();
alert("テストです");
}
var x2 = document.getElementById("test-submit2");
x2.addEventListener("submit", func2, false);
</script>
実行例は、以下の通りです。
数字を選択しただけではイベント発生(処理の実行)にはならず、実行ボタンをクリックするとアラートが表示されます。ラジオボタンやチェックボックス等も同じで、選択しただけではイベント発生にはなりません。
サポート
・サポートするブラウザ
以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。
【サポートするブラウザ】
機種 |
ブラウザ |
サポート |
パソコン |
Chrome |
〇 |
Safari |
〇 |
Firefox |
〇 |
Microsoft Edge |
〇 |
Internet Explorer |
v9以上 |
スマートフォン |
Chrome |
〇 |
Safari |
〇 |
Firefox |
〇 |
・サポートするタグ
サポートするタグの一例は、以下の通りです。
<form>