POSTリクエスト、Ajax通信、サーバーサイド処理…フォーム送信時のリフレッシュ防止テクニック

2024-05-13

Javascript、jQuery、HTMLを用いたフォーム送信時のページリフレッシュ防止

JavaScriptによるイベントハンドラ

JavaScriptを用いて、フォーム送信イベントにイベントハンドラを設定することで、ページリフレッシュを防止することができます。

<form id="myForm">
  <input type="text" name="name">
  <input type="email" name="email">
  <button type="submit">送信</button>
</form>

<script>
  const myForm = document.getElementById('myForm');

  myForm.addEventListener('submit', function(event) {
    event.preventDefault(); // ページリフレッシュを防止

    // 送信処理

    // 送信処理完了後、必要に応じてリダイレクト
  });
</script>

jQueryによるイベントハンドラ

<form id="myForm">
  <input type="text" name="name">
  <input type="email" name="email">
  <button type="submit">送信</button>
</form>

<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      event.preventDefault(); // ページリフレッシュを防止

      // 送信処理

      // 送信処理完了後、必要に応じてリダイレクト
    });
  });
</script>

HTMLの action 属性

HTMLの form 要素の action 属性に javascript:void(0); を設定することで、ページリフレッシュを防止することができます。ただし、この方法では送信処理を実装する必要があります。

<form id="myForm" action="javascript:void(0);">
  <input type="text" name="name">
  <input type="email" name="email">
  <button type="submit">送信</button>
</form>

<script>
  const myForm = document.getElementById('myForm');

  myForm.addEventListener('submit', function(event) {
    // 送信処理

    // 送信処理完了後、必要に応じてリダイレクト
  });
</script>

送信処理

上記の方法でページリフレッシュを防止した後は、送信処理を実装する必要があります。送信処理には、Ajax通信やサーバサイドスクリプトを用いることができます。

まとめ

JavaScript、jQuery、HTMLを用いて、フォーム送信時のページリフレッシュを防止する方法について解説しました。それぞれの方法には利点と欠点があるため、状況に合わせて最適な方法を選択してください。

JavaScript

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォーム送信時のページリフレッシュ防止</title>
</head>
<body>
  <form id="myForm">
    <input type="text" name="name" placeholder="名前">
    <input type="email" name="email" placeholder="メールアドレス">
    <button type="submit">送信</button>
  </form>

  <script>
    const myForm = document.getElementById('myForm');

    myForm.addEventListener('submit', function(event) {
      event.preventDefault(); // ページリフレッシュを防止

      const name = event.target.elements.name.value;
      const email = event.target.elements.email.value;

      // 送信処理

      console.log(`名前: ${name}`);
      console.log(`メールアドレス: ${email}`);

      // 送信処理完了後、必要に応じてリダイレクト
    });
  </script>
</body>
</html>

jQuery

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォーム送信時のページリフレッシュ防止</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <form id="myForm">
    <input type="text" name="name" placeholder="名前">
    <input type="email" name="email" placeholder="メールアドレス">
    <button type="submit">送信</button>
  </form>

  <script>
    $(document).ready(function() {
      $('#myForm').submit(function(event) {
        event.preventDefault(); // ページリフレッシュを防止

        const name = $(this).find('input[name="name"]').val();
        const email = $(this).find('input[name="email"]').val();

        // 送信処理

        console.log(`名前: ${name}`);
        console.log(`メールアドレス: ${email}`);

        // 送信処理完了後、必要に応じてリダイレクト
      });
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォーム送信時のページリフレッシュ防止</title>
</head>
<body>
  <form id="myForm" action="javascript:void(0);">
    <input type="text" name="name" placeholder="名前">
    <input type="email" name="email" placeholder="メールアドレス">
    <button type="submit">送信</button>
  </form>

  <script>
    const myForm = document.getElementById('myForm');

    myForm.addEventListener('submit', function(event) {
      // 送信処理

      const name = event.target.elements.name.value;
      const email = event.target.elements.email.value;

      console.log(`名前: ${name}`);
      console.log(`メールアドレス: ${email}`);

      // 送信処理完了後、必要に応じてリダイレクト
    });
  </script>
</body>
</html>