フォームを送信する時に処理を実行する onsubmit。
フォームを作って送信時に何かしらの処理をしたい場合に onsubmit が使われることがあります。
目次
onsubmit の使い方
例えばフォームを送信するときに確認をする。
<form method="" action="" onsubmit="return submitCheck()">
<p>名前：<input type="text" name="name" size="20" id="fullname"></p>
<p><input type="submit" value="送信"></p>
</form>
<script>
function submitCheck(){
if(window.confirm('送信？')) {
return true; // 「OK」なら送信
}
else {
window.alert('キャンセル');
return false; // 「キャンセル」なら送信しない
}
}
</script>window.confirmについて : window.confirm – Web API | MDN
onsubmit は form要素で動作する
onsubmit はhtmlの form要素で動作します。
下記のように、formタグ以外に属性を追加しても動作しません。
<form method="" action="">
<p>名前：<input type="text" name="name" size="20" id="fullname"></p>
<p><input type="submit" value="送信" onsubmit="return submitCheck()"></p>
</form>onsubmit に return
<form method="" action="" onsubmit="return submitCheck03()">
<p>名前：<input type="text" name="name" size="20" id="fullname"></p>
<p><input type="submit" value="送信"></p>
</form>
<script>
function submitCheck03(){
if (document.getElementById('fullname').value == "") {
alert("入力してください");
return false;
}
else {
return true;
}
}
</script>このコードでは、送信時にsubmitCheck03() を使います。空欄の場合 → return false にしているので、送信したくありません。
onsubmit="return submitCheck03()"
とすれば問題なく動作しますが、onsubmit="submitCheck03()"
というように return を外してしまうと、名前の入力欄を空欄にして送信した時、アラートが出てそのまま送信されてしまいます。
こういった挙動が出てしまう場合もあるので、onsubmitにはreturnをつけることが必要です。
onclickとonsubmit
この2つの違いはイベント発生のタイミング。
onclick は「クリックする」ことで発生し、oncsubmit は「フォームが送信される」時に発生します。
onclick ではキーボード操作は含まれず、キーボードの enter を押しても動作しません。
onsubmit は「フォームが送信された時」なので、その過程がクリックでもキーボード操作でも動作します。
参考記事 : submitにセットしたonClickの挙動について
onclickとonsubmitで複数ボタンの判定
<form name="formtest" method="" action="" onsubmit="return submitCheck02()">
<input name="test01" type="submit" value="test01" onclick="formtest.hide_key.value = 'test01'">
<input name="test02" type="submit" value="test02" onclick="formtest.hide_key.value = 'test02'">
<input name="test03" type="submit" value="test03" onclick="formtest.hide_key.value = 'test03'">
<input name="hide_key" type="hidden" value="">
</form>
<script>
function submitCheck02() {
const hideKey = formtest.hide_key.value;
if(hideKey == 'test01') {
window.alert('test01');
} else if(hideKey == 'test02') {
window.alert('test02');
}
return false;
}
</script>onclick="formtest.hide_key.value = 'test〇〇'" とすることで、各ボタンをクリックした時に name="hide_key" に value を追加します。
submitCheck02() で name="hide_key" にある値をチェックして処理する条件分岐を設定。
このような形で、どのボタンを押したかによって処理内容を変えることができます。
カテゴリー : JavaScript
