submitとはユーザーがフォーム上でENTERキーを押したり送信ボタンを押すことで発生するイベントのことです。今回はこのsubmitについて紹介します。
submitとは
submit()の基本構文
HTMLのformタグは、ユーザーに情報を入力させたりした内容を、サーバーに送信するためのものです。基本的なHTMLフォームは以下のようになります。送信ボタンは、<input type=”submit”>を使用して作成します。ボタンをクリックすると、action要素で指定されたURLにデータを送信します。
HTML
<form name="myform" action="/submit_form" method="post">
<input name="text" type="text" />
<input type="submit" value="送信" />
</form>JavaScriptでフォームの内容を送信する場合、submitイベントを発火させるformオブジェクトに対して .submit()メソッドを実行します。
JavaScript
document.forms["myform"].submit();submit()の使用方法
上記の様な、HTMLのsubmitイベントをJavaScriptから操作するためのメソッドがsubmit()になります。通常は、HTMLタグにsubmitを設定していましたが、これをJavaScriptだけで実現できるのがsubmit()メソッドになります。
下記では、HTMLの属性としてsubmitを指定するのではなく、JavaScriptにてsubmit()を用いて送信処理を行なっております。
HTML
<body>
<form name="form">
<input name="text" type="text" />
<button id="btn">送信</button>
</form>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
console.log(document.form.text.value);
document.form.submit();
})
</script>
</body>上記のようにJavaScript側で送信処理を行いたい場合は、submit()メソッドを用いて記載します。
エンジニアからのアドバイス
フォームの送信は実態がわかりにくいかと思いますが、サイト内で必ず使われていると言っても過言ではないくらい頻出するものです。いつも見ているサイトのフォーム処理がどうなっているのかなど検証ツールで確認してみましょう。