jQuery - submitイベント

公開日:2018-12-21 更新日:2019-05-14
[jQuery]

1. 概要

submitされると、submitイベントが発生します。
ここで、submit前の処理や、submitの中止などを行うことができます。

$(セレクタ).on("submit", function(e) {
	処理;
});

2. サンプル

submitを中止します。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <form action="https://9cubed.info/">
    <input type="submit" value="送信" /><br /><br />
  </form>

  <div id="msg"></div>

  <script>

    $("form").on("submit", function(e) {
      $("#msg").html("submitを中止しました。");

      //submit を中止します
      return false; //または e.preventDefault();
    });

  </script>
</body></html>

実行結果:画面