onsubmit を使ったデモ【JavaScript】

送信時に確認する

動作確認

html


            <form method="" action="" onsubmit="return submitConfirm()">
              <p>名前：<input type="text" name="name" size="20" id="fullname"></p>
              <p><input type="submit" value="送信"></p>
            </form>

JavaScript


            function submitConfirm(){
              if(window.confirm('送信しますか？')) {
                return true;
              }
              else {
                window.alert('キャンセルしました');
                return false;
              }
            }

空欄の場合はアラートを出す

動作確認

return をつけない場合
上記のフォームは何かしらを入力後、送信ボタンを押して表示されるアラートでキャンセルをクリックするとそのまま入力内容が残る。しかし以下のフォームで同様のことをしても、このページのトップに移動する（送信されてしまっているということ）

html


            <form method="" action="" onsubmit="return blankCheck()">
              <p>フリガナ：<input type="text" name="name" size="20" id="kananame"></p>
              <p><input type="submit" value="送信"></p>
            </form>

JavaScript


            function blankCheck(){
              let inputName = document.getElementById('kananame').value;
              if (inputName === "") {
                alert("入力してください");
                return false;
              } else {
                if(!window.confirm(`${inputName}を送信します`)) {
                  return false
                }
              }
            }

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

動作確認

html


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

JavaScript


            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;
              }
            }