なんでわざわざJavaScriptでフォームの送信を実行するの?
JavaScriptで「submit」イベント利用すると、フォームを送信する前にさまざまな処理を行うことが可能になります。例えば、未記入の項目があるとき、フォームを送信しないようにできたりします。
今回は、JavaScriptから操作するための基本的な「submit()」メソッドの使い方を見ていきます。
submit()メソッドの使い方
submit()メソッドを使うときは、ボタンをinput要素ではなく、button要素で設定します。
button要素にname属性を付与し、このように記述することで、わざわざ「getElementById()」を使って要素を取得する必要が無くなります。
<form name="mytask">
<input name="mytext" type="text">
<!-- name属性を付与する -->
<button name="btn">作成</button>
</form>
<script>
document.mytask.btn.addEventListener('click', function() {
document.mytask.submit();
});
</script>
ただし、この方法には1つ注意が必要です。それはname属性値を「submit」と記述してしまうとエラーになるという点です。
<!-- これはNG -->
<button name="submit">送信</button>