送信時に処理するonsubmit

更新2021/10/20

フォームを送信する時に処理を実行する 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

TOPへ