（Web API）
https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/submit
submit()通常は、HTMLタグの「input」内にtype属性として「submit」を設定するが、これをJavaScriptだけで実現できるのが「submit()」メソッドである。
以下の例は、form内にbuttonタグで定義した送信ボタンを設置し、JavaScriptコード内で「myform.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>button要素に「name属性」を付与してフォーム部品として扱うと、さらに簡単に記述することができる。
ただし、name属性値を「submit」と記述してしまうとエラーになるので注意が必要である。
<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>
<!-- これはNG -->
<button name="submit">送信</button>「onsubmit」を使ったフォーム送信
「onsubmit」は「formタグ」内の属性として記述するようになっており、任意のJavaScript関数を実行することができる。
<form onsubmit="任意のJavaScript関数"></form>このように記述することで、フォームを送信する前に自動でJavaScript関数が実行され、その後にフォームを送信する処理に移行できる。
以下の例では、form の属性「onsubmit」にJavaScriptの関数「checkText()」を実行する。
実行されるとフォームへ入力した文字列をアラートで表示する仕組みになっている。そして、アラートを消すとフォームの送信処理が動作する。
<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>「submit」ボタンをキャンセルする
formのsubmitボタンをクリックすることで送信処理が行われるが、これをキャンセルするには、form要素に「false」を渡してあげればよい。
<form name="myform" onsubmit="return false">
<input name="mytext" type="text" />
<input type="submit" value="送信" />
</form>このように、onsubmit属性に「return false」と記述すれば、submitボタンをクリックしても処理がキャンセルされて何も発生しないようにできる。
「onclick」を使った方法
「onclick」は、formタグ以外でも属性としてさまざまなHTML要素に利用することが可能で、今回の場合であればsubmitボタンの属性に指定すれば良い。
基本的にはどちらの方法でも目的を果たすことは可能だが、あくまでformに限った内容であれば「onsubmit」を使い、それ以外は「onclick」という使い分けがベストである。
なお、name属性の「値」とonclickの「関数名」が同じだとエラーになるので注意すること。
<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>
<!-- name属性と関数名が同じになっているのでNG -->
<button name="clickEvent" onclick="clickEvent()">送信</button>通常ボタンでsubmitする
button要素に「onclick」を使ってJavaScriptのコードを実行する。
<body>
<form name="myform">
<input name="mytext" type="text" />
<button onclick="clickEvent()">送信</button>
</form>
<script>
function clickEvent() {
document.myform.submit();
}
</script>
</body>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を記述するのと同じ処理を実現することができる。
