【JavaScript】JavaScriptでフォームの送信を実行 submit()メソッド

なんでわざわざ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>
タイトルとURLをコピーしました