送信時に処理する onsubmit 基本の使い方 | KoMariCote

送信時に処理する onsubmit 基本の使い方

更新2024/03/20

フォームを作って送信時に何かしらの処理をしたい場合に使える JavaScript の 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 は「クリックする」ことで発生し、onsubmit は「フォームが送信される」時に発生します。

onclick ではキーボード操作は含まれず、キーボードの enter を押しても動作しません。
onsubmit は「フォームが送信された時」なので、その過程がクリックでもキーボード操作でも動作します。

【参考】submitにセットしたonClickの挙動について

onclickとonsubmitで複数ボタンの判定

このサンプルコードでは3つのボタンを用意しました。
それぞれのボタンがクリックされたら見えないinput タグに value を追加するようになっています。
送信されたときに「test01」なら test01、「test02」なら test02 のテキストがアラートに表示され、「test03」をクリックした場合はアラートは表示されず、送信もされません。

<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へ