フォーム送信の防止 JavaScript

1. JavaScript で script タグ内の関数を使用してフォームの実行を停止する
2. JavaScript でバニラ JavaScript を使用してフォームの実行を停止する
3. JavaScript で jQuery ライブラリを使用してフォームの実行を停止する
4. JavaScript で Dojo Toolkit を使用してフォームの実行を停止する

JavaScript はすべての Web ブラウザーでサポートされており、動的な Web ページを作成するために使用されます。このチュートリアルでは、JavaScript を使用したフォームの実行を停止します。

JavaScript で script タグ内の関数を使用してフォームの実行を停止する

script タグは、クライアント側のスクリプトを含めるために使用されます。フォームの送信を防ぐために、script タグ内に JavaScript 関数を作成しました。

以下のコードを確認してください。

<form onsubmit="submitForm(event)">
  <input type="text">
  <button type="submit">Submit</button>
</form>
<script type="text/JavaScript">
  function submitForm(event){
    event.preventDefault();
    window.history.back();
  }
</script>

preventDefault() 関数は、イベントのデフォルトのアクションを実行させません。window.history.back() は、履歴内の前の URL に移動します。説明するすべてのメソッドには、これら 2つの関数が含まれます。

JavaScript でバニラ JavaScript を使用してフォームの実行を停止する

Vanilla JavaScript は、追加のライブラリを使用せずに、純粋に JavaScript で動作します。

イベントリスナーを使用して、フォームの送信を防ぐことができます。送信ボタンに追加され、機能を実行し、クリックされたときにフォームが送信されないようにします。

例えば、

element.addEventListener('submit', function(event) {
  event.preventDefault();
  window.history.back();
}, true);

JavaScript で jQuery ライブラリを使用してフォームの実行を停止する

jQuery は、JavaScript の使用を簡素化する高速で堅牢なライブラリです。これは、JavaScript の最も人気のあるライブラリの 1つです。

フォームの送信を防ぐ方法を見ていきます。

以下のコードを確認してください。

$('#form').submit(function(event) {
  event.preventDefault();
  window.history.back();
});

$('#form').submit() 関数は、jQuery でフォームを送信するために使用されます。

JavaScript で Dojo Toolkit を使用してフォームの実行を停止する

これは、Web ベースのアプリケーションで JavaScript をクロスプラットフォームで簡単に使用できるようにする JavaScript ライブラリです。dojo.connect() 関数を使用してイベントを処理します。この場合、これはフォームの送信に使用され、preventDefault() および window.history.back() 関数を使用してこれを防ぎます。

例えば、

dojo.connect(form, 'submit', function(event) {
  event.preventDefault();
  window.history.back();
});