JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでフォーム送信時のページ再読み込みを防ぐ方法

はじめに

HTMLフォームをユーザーが送信した際、通常ブラウザは自動的にページを再読み込みします。しかし、クライアント側でsubmitイベントを処理したい場合、このデフォルトの動作は邪魔になります。本記事では、JavaScriptを使ってフォーム送信時のページリロードを防ぐ方法を解説します。

対象となるHTMLフォーム

まず、以下のようなシンプルなメールアドレス入力フォームを例に考えます。

<form name="formcontact1" action="#">
<input
    type='text'
    name='email'
    size="36"
    placeholder="Your e-mail :)"/>
<input
    type="submit"
    name="submit"
    value="SUBMIT"
    onclick="ValidateEmail(document.formcontact1.email)"
/>
</form>

このままでは、SUBMITボタンをクリックするとブラウザがページを再読み込みしてしまいます。そこで、クライアント側でイベントを処理し、再読み込みを防止する必要があります。

preventDefault()メソッドによる解決策

最も簡単かつ確実な方法は、フォームのonclick属性から呼び出しているValidateEmail()関数の先頭に、event.preventDefault()を追加することです。

function ValidateEmail(event, inputText){
    event.preventDefault();
    // 残りの関数ロジックをここに記述
}

preventDefault()は、イベントに対するブラウザのデフォルト動作（ここではフォーム送信によるページ再読み込み）をキャンセルし、代わりにクライアント側でフォーム送信イベントを処理できるようにするメソッドです。

完全なサンプルコード

以下は、上記の仕組みを実装した完全なHTMLコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="formcontact1" action="#">
<input
    type='text'
    name='email'
    size="36"
    placeholder="Your e-mail :)"/>
<input
    type="submit"
    name="submit"
    value="SUBMIT"
    onclick="ValidateEmail(document.formcontact1.email)"
/>
</form>
<script>
{
    function ValidateEmail(event, inputText){
        event.preventDefault();
        // 残りの関数ロジックをここに記述
    }
}
</script>
</body>
</html>

addEventListener()を使う代替手法

インラインのonclick属性ではなく、addEventListener()を使ってイベントリスナーを登録する方法も推奨されています。こちらの方がHTMLとJavaScriptを分離でき、コードの保守性が向上します。

document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault();
    // フォーム送信後の処理をここに記述
});

まとめ

フォーム送信時のページ再読み込みを防ぐには、イベントオブジェクトのpreventDefault()メソッドを呼び出すのが基本です。これにより、Ajax通信やバリデーションなど、ページ遷移なしでクライアント側の処理を行うことが可能になります。モダンな開発では、インラインイベントハンドラよりもaddEventListener()を利用するアプローチが一般的なので、状況に応じて使い分けるとよいでしょう。

  1. JavaScriptでフォーム送信を実装！送信ボタンと入力クリアボタンの作成方法

    フォーム送信ボタンと入力クリアボタンの実装 フォームのデータ送信には type=submit のボタンを使用し、テキストボックスなどに入力された内容を消去するためには、クリック時にJavaScript関数を呼び出す別のボタンを設置します。以下のコードでは、「Submit（送信）」ボタンと「Delete（削除）」ボタンの2種類を実装しています。 コード例 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=de

  2. JavaScriptでフォーム送信時の入力値を変更する方法

    JavaScriptでフォーム送信時にinput要素の値を変更したい場合は、documentオブジェクトを利用します。フォーム名とテキスト名を指定して、valueプロパティに新しい値を代入するだけで簡単に実現できます。基本構文入力値を変更するための基本構文は以下の通りです。document.yourFormName.yourTextName.value=anyValue;この構文では、「yourFormName」にフォームのname属性の値、「yourTextName」にinput要素のname属性の値を指定し、「anyValue」に設定したい新しい値を代入します。フォームの例ここでは、「Su