submit（送信）ボタンをクリックしたときに別のページにリダイレクトする

JavaScript(ジャバスクリプト)

2023.04.06

この記事は約3分で読めます。

submit（送信）ボタンをクリックしたときに、別のページにリダイレクトする方法についてご紹介します。

送信ボタンを押した時に別ページにリダイレクトさせる
form actionについて
まとめ

送信ボタンを押した時に別ページにリダイレクトさせる

HTMLとJavaScriptを使用して、以下のようなコードを書くことで別ページにリダイレクトさせることができます。

<form action="別のページのURL" method="POST">
  <!-- フォームの中身 -->
  <input type="submit" value="送信">
</form>

<script>
  document.querySelector('form').addEventListener('submit', function() {
    location.href = '別のページのURL';
  });
</script>

このコードでは、form要素のaction属性に別のページのURLを指定し、submitイベントが発生したときにJavaScriptでページをリダイレクトしています。

addEventListenerメソッドを使用して、submitイベントが発生したときに実行されるコールバック関数を登録しています。コールバック関数では、location.hrefプロパティを使用して、リダイレクト先のURLを指定しています。

form actionについて

<form action="別のページのURL" method="POST">

[rml_read_more]

このコードはHTMLでのフォームの設定に使用されます。このコードは、フォームが送信されたときにどのURLに送信するかを指定しています。

action属性には、フォームが送信されたときにデータを送信する先のURLを指定します。例えば、フォームデータを処理するためのサーバーサイドスクリプトがある場合は、そのスクリプトのURLを指定することができます。

method属性には、フォームデータの送信方法を指定します。一般的には、POSTまたはGETを指定します。POSTは、フォームデータをHTTPリクエストのボディに含めて送信する方法です。GETは、フォームデータをHTTPリクエストのクエリ文字列に含めて送信する方法です。

例えば、以下のようなコードを書くことができます。

<form action="https://example.com/submit-form" method="POST">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="送信">
</form>

この例では、action属性に「https://example.com/submit-form」というURLを指定しています。また、method属性にはPOSTを指定しています。

フォームには、名前とメールアドレスの入力フィールドがあります。最後に、送信ボタンを設置しています。

フォームが送信されると、入力されたデータが「https://example.com/submit-form」というURLにPOSTされます。