フォームを作って送信時に何かしらの処理をしたい場合に使える JavaScript の onsubmit の使い方メモです。
onsubmit の使い方
例えば、フォームを送信するときに確認アラートを表示させたいときは以下のようなコードを書きます。
<form method="" action="" onsubmit="return submitConfirm()">
<p>名前：<input type="text" name="name" size="20" id="fullname"></p>
<p><input type="submit" value="送信"></p>
</form>
<script>
function submitConfirm(){
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 submitConfirm()"></p>
</form>onsubmit には return をつける
<form method="" action="" onsubmit="return blankCheck()">
<p>名前：<input type="text" name="name" size="20" id="fullname"></p>
<p><input type="submit" value="送信"></p>
</form>
<script>
function blankCheck(){
if (document.getElementById('fullname').value === "") {
alert("入力してください");
return false;
}
else {
return true;
}
}
</script>このコードでは、送信時にblankCheck() を使います。空欄の場合は送信したくないので return false でキャンセルします。
onsubmit="return blankCheck()"
とすれば問題なく動作しますが、onsubmit="blankCheck()"
というように return を外してしまうと、名前の入力欄が空欄の時にアラートは表示されますが、キャンセル処理はされず、そのまま送信されてしまいます。
こういった挙動が出てしまう場合もあるので、onsubmitにはreturnをつけることが必要です。
onclick と onsubmit
この2つの違いはイベント発生のタイミング。
onclick は「クリックする」、onsubmit は「フォームが送信される」時です。
onclick ではキーボード操作は含まれず、キーボードの enter を押しても動作しません。
onsubmit は「フォームが送信される時」なので、その過程がクリックでもキーボード操作でも動作します。
【参考】submitにセットしたonClickの挙動について
onclickとonsubmitで複数ボタンの判定
このサンプルコードでは3つのボタンを用意しました。
それぞれのボタンがクリックされたら見えないinput タグに value を追加するようになっています。
送信されたときに「test01」なら test01、「test02」なら test02 のテキストがアラートに表示され、「test03」をクリックした場合はアラートは表示されず、送信もされません。
<form name="formtest" method="" action="" onsubmit="return inputValCheck()">
<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 inputValCheck() {
const hideKey = formtest.hide_key.value;
if(hideKey == 'test01') {
window.alert('「test01」ボタンで送信');
return true;
} else if(hideKey == 'test02') {
window.alert('「test02」ボタンで送信');
return true;
} else {
return false;
}
}
</script>onclick="formtest.hide_key.value = 'test〇〇'" とすることで、各ボタンをクリックした時に name="hide_key" に value を追加します。
submitCheck02() で name="hide_key" にある値をチェックして処理する条件分岐を設定。
このような形で、どのボタンを押したかによって処理内容を変えることができます。
カテゴリー : JavaScript
