こんにちは、ライターのマサトです！
あなたのWEBサイト、フォームってありますか？
お問い合わせとか意見箱のために設置している人も多いと思います。項目を入力して、最後に送信ボタンを押すと、内容が送信されますよね。
その送信、JavaScriptでコントロールできるってご存知ですか？
知ってたけど、どうやるんだっけ？
知ってたけど、どうやるんだっけ？
という人も必見！
今回は、フォームの送信を行なう「submit」イベントについて解説していきます
この「submit」イベント、2つの方法で実装することができます。それぞれの方法と、実装時の注意点までしっかり解説していきます。
ばっちり覚えて、JavaScriptでフォームをコントロールできるようになっちゃいましょう！
「submit」とは？
それでは、まず最初に「submit」イベントについての基本的な知識から学習をしていきましょう！
一般的に「submit」を使うケースと言うのは、Webページにフォームを設置する時になります。
例えば、次の例を見てください！
<form>
<input name="mytext" type="text" />
<!-- 「submit」ボタンを設置する -->
<input type="submit" value="送信" />
</form>
これは、入力フォームが1つだけの簡単なフォームを設置する例ですが、ブラウザで実行すると以下のようになります。
この時に、ユーザーが入力したフォームの内容を、サーバーへ送信する際のボタンとして利用しているのが「submit」イベントになるわけです。
JavaScriptで「submit」イベント利用すると、フォームを送信する前にさまざまな処理を行うことが可能になります。
「sbumit」の使い方
送信処理をコントロールする方法
それでは、「submit」イベントをJavaScriptから操作するための「submit()」メソッドについてご紹介します！
通常は、HTMLタグの「input」内にtype属性として「submit」を設定していましたが、これをJavaScriptだけで実現できるのが「submit()」メソッドになります。
次のコード例を見てください！
<body>
<form name="myform">
<input name="mytext" type="text" />
<!-- ボタン要素で送信ボタンを設置 -->
<button id="btn">送信</button>
</form>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
alert(document.myform.mytext.value);
//submit()でフォームの内容を送信
document.myform.submit();
})
</script>
</body>
この例では、form内にbuttonタグで定義した送信ボタンを設置し、JavaScriptコード内で「myform.submit()」と記述することで送信処理を行っています。
このような記述をすれば、送信処理をJavaScriptからコントロールできるので便利ですね。
name属性で注意すること
先ほど「submit()」メソッドを使った例を解説しましたが、実はもっと簡単に記述する方法があります。
それは、button要素に「name属性」を付与してフォーム部品として扱う方法です。
次のサンプル例を見てください！
<body>
<form name="myform">
<input name="mytext" type="text" />
<!-- name属性を付与する -->
<button name="btn">送信</button>
</form>
<script>
document.myform.btn.addEventListener('click', function() {
document.myform.submit();
});
</script>
</body>
この例では、先ほどと同じHTMLを使っていますがbutton要素にname属性が付与されているのが分かります。このように記述することで、わざわざ「getElementById()」を使って要素を取得する必要が無くなるわけですね。
ただし、この方法には1つ注意が必要です。それはname属性値を「submit」と記述してしまうとエラーになるという点です。
つまり、次のような記述はNGということになります！
<!-- これはNG --> <button name="submit">送信</button>
上記のような記述をすると「document.myform.submit.addEventListener()」のようなイベント処理になってしまいますよね？
そのため、「document.myform.submit()」と混同してしまいイベント処理が正しく行われないというわけです。
初心者の方だと何気なく記述してしまうポイントなので、十分に注意をしましょう！
「onsubmit」の使い方
フォーム送信する方法
今度は、「onsubmit」を使ったフォーム送信をJavaScriptから操作してみましょう！
「onsubmit」は「formタグ」内の属性として記述するようになっており、任意のJavaScript関数を実行することができます。
<form onsubmit="任意のJavaScript関数"></form>
このように記述することで、フォームを送信する前に自動でJavaScript関数が実行され、その後にフォームを送信する処理に移行できます。
これを利用した実際のコード例を見てみましょう！
<body>
<!-- フォーム送信時にcheckText関数を実行する -->
<form name="myform" onsubmit="checkText()">
<input name="mytext" type="text" />
<input type="submit" value="送信" />
</form>
<script>
function checkText() {
//入力ボックスの内容を表示する
alert( document.myform.mytext.value );
}
</script>
</body>
この例では、form の属性「onsubmit」にJavaScriptの関数「checkText()」を実行するようにプログラムをしています。
そこで、JavaScriptのコードにはcheckText関数を作成しており、実行されるとフォームへ入力した文字列をアラートで表示する仕組みになっていますね。
そして、アラートを消すとフォームの送信処理が動作するというわけです。
「submit」ボタンをキャンセルする方法！
通常は、formのsubmitボタンをクリックすることで送信処理が行われるわけですが、これをキャンセルする方法があるのでご紹介します。
方法は簡単で、form要素に「false」を渡してあげるだけです。
一般的には、「onsubmit」属性に次のような記述を行います！
<form name="myform" onsubmit="return false">
<input name="mytext" type="text" />
<input type="submit" value="送信" />
</form>
このように、onsubmit属性に「return false」と記述すれば、submitボタンをクリックしても処理がキャンセルされて何も発生しないようにできます。
ただ、これだけだと何が便利なの？…と思うかもしれませんが、一般的にはフォームの内容に誤りがあった場合などに送信処理をキャンセルするような使い方が考えられます。
「onclick」を使った方法
次に、「onclick」を使ったフォーム送信をJavaScriptから操作してみましょう！
「onclick」は、formタグ以外でも属性としてさまざまなHTML要素に利用することが可能で、今回の場合であればsubmitボタンの属性に指定すれば良いでしょう。
次の例を見てください！
<body>
<!-- フォーム送信時にcheckText関数を実行する -->
<form name="myform">
<input name="mytext" type="text" />
<!-- onclick属性を付与してcheckText関数を実行する -->
<input type="submit" value="送信" onclick="checkText()" />
</form>
<script>
function checkText() {
//入力ボックスの内容を表示する
alert( document.myform.mytext.value );
}
</script>
</body>
この例では、submitボタンの属性にJavaScriptのcheckText関数をonclickで実行するように指定しました。
実行してみると、先ほどの「onsubmit」とまったく同じ挙動をすることに気づくでしょう。
基本的にはどちらの方法でも目的を果たすことは可能ですが、あくまでformに限った内容であれば「onsubmit」を使い、それ以外は「onclick」という使い分けがベストでしょう。
通常ボタンでsubmitしてみる
今度はinputタグ以外の属性に「onclick」を付与した場合も見てみましょう！
一般的によく使われるのは「buttonタグ」による通常のボタン要素でしょう。この「button要素」と「submit()」の組み合わせによる「フォーム送信例」は冒頭でご紹介しましたよね？
そのため、ここでは「onclick」を活用したフォームの送信を行ってみましょう！
<body>
<form name="myform">
<input name="mytext" type="text" />
<button onclick="clickEvent()">送信</button>
</form>
<script>
function clickEvent() {
document.myform.submit();
}
</script>
</body>
この例では、button要素に「onclick」を使ってJavaScriptのコードを実行しています。
考え方はinput要素を使っていた時とまったく同じですね。「onclick」にJavaScriptの関数を指定することで、button要素をクリックした瞬間に実行されるわけです。
関数「clickEvent()」の中身ですが、これまで通り「submit()」メソッドを実行しているのが分かりますね。
属性名と関数名が同じだと実行されない？
「onclick」を使うとさまざまな要素に関数が指定できるので便利なのですが、注意するポイントもあります！
実は、name属性の「値」とonclickの「関数名」が同じだとエラーになるという点です。
これは実際のサンプル例を見ると分かりやすいでしょう！
<body>
<form name="myform">
<input name="mytext" type="text" />
<!-- name属性と関数名が同じになっているのでNG -->
<button name="clickEvent" onclick="clickEvent()">送信</button>
</form>
<script>
function clickEvent() {
document.myform.submit();
}
</script>
</body>
実行結果
Uncaught TypeError: clickEvent is not a function......
この例では、button要素に「onclick」を使って関数を指定していますね。
パッと見ると問題ないように思えますが、このままだとエラーになってしまいフォームは送信できません。理由は、button要素に「関数名」と同じ「name属性値」が付与されているからです。
このようにまったく同じ名称をうっかり付けてしまうとバグの要因になってしまうので、忘れないようにしておきましょう！
formの内容によって条件分岐するには？
ユーザー側がフォームに何か入力する時に、開発側の意図した通りに入力されるとは限りません。
そこで、フォームの内容を送信する前に、正しく入力されているかを確認する処理を挟み込むのが一般的です。そんな時に、先ほどのキャンセル処理を活用して、フォームの内容によって条件分岐するような処理を実装してみましょう！
次のサンプルは、入力フォームにユーザーが何も入力しなかった場合にエラーメッセージを表示する例です。
<body>
<form name="myform" onsubmit="return checkText()">
<input name="mytext" type="text" />
<input type="submit" value="送信" />
</form>
<script>
function checkText() {
var text = document.myform.mytext.value;
if(text.length === 0) {
alert('文字が入力されていません！');
return false;
}
}
</script>
</body>
この例では、入力された文字列を取得して、「text.length === 0」という条件式で分岐させることで入力されているかどうかを判断しています。
もし入力されていなかったら「return false」を返すわけですが、「onsubmit」内に記述しているJavaScript関数の所でもreturn文を一緒に書くようにしましょう！
このようなプログラムにすることで、正しくフォームが入力されていれば送信処理を行い、そうでなければエラーメッセージを表示してもう1度ユーザーに入力してもらうことが出来るわけです。
「action」のURLを動的に変更する方法！
submitボタンをクリックすると送信処理が行われて、formタグ内の「action」属性で指定されたURLに画面遷移することができます。
この時に、JavaScriptから遷移先のURLを変更することが可能なので、その方法についてご紹介します。
次のサンプルを見てください！
<body>
<form name="myform" onsubmit="return checkText()">
<input type="text" />
<input type="submit" value="送信" />
</form>
<script>
function checkText() {
//actionメソッドに遷移先のURLを代入する
document.myform.action = "/sample.html";
}
</script>
</body>
この例でポイントになるのは、JavaScriptコード内で「myform.action」に遷移させたいURLを代入している点です。このように代入することで、formタグのaction属性にURLを記述するのと同じ処理を実現することができます。
非常にシンプルな記述で遷移先を変更することができるので、条件によって遷移先を変更するなどユニークな機能を簡単に実装することができるでしょう。
まとめ
今回は、form要素でよく使うsubmitイベントについて学習しました！
最後に、もう1度だけ要点をおさらいしておきましょう。
- submitイベントはフォーム内のデータを送信する処理を行う
- 「onsubmit」「onclick」を使うとJavaScriptの独自関数を実行できる
- form要素に「return false」すると送信処理をキャンセルできる
- actionメソッドを使うと画面遷移先のURLを動的に変更できる
これらの内容を踏まえて、ぜひ自分のプログラムにも積極的に取り込んでいけるように頑張りましょう！
