JavaScript で formaction 属性を変更する方法

HTML <input> 属性 formaction の詳細解説

formaction 属性は、HTML フォームの送信時にデータを処理するファイルの URL を指定します。これは <input> 要素と <button> 要素で使用できます。

主な機能

• フォーム送信時に、formaction 属性で指定された URL にデータを送信します。
• フォーム全体の action 属性よりも優先されます。
• 複数のボタンや画像を配置し、それぞれ異なる URL に送信したい場合に便利です。

属性値

• 絶対 URL または相対 URL を指定できます。
• クエリ文字列を含めることもできます。

使用例

複数の送信ボタンで異なる URL に送信

<form action="/default_action.php">
  <input type="text" name="name">
  <input type="text" name="email">
  <input type="submit" value="送信">
  <input type="submit" formaction="/other_action.php" value="別途送信">
</form>

この例では、最初の "送信" ボタンを押すと /default_action.php にデータが送信され、2番目の "別途送信" ボタンを押すと /other_action.php にデータが送信されます。

画像ボタンで URL を指定

<form action="/action.php">
  <input type="image" src="submit.png" formaction="/other_action.php">
</form>

この例では、"submit.png" 画像をクリックすると、/other_action.php にデータが送信されます。

注意点

• formaction 属性は、type="submit" または type="image" のボタンでのみ使用できます。
• フォームに複数の formaction 属性を持つボタンがある場合、最後に押されたボタンの属性が優先されます。

ブラウザのサポート

• すべての主要なブラウザでサポートされています。

補足

• formaction 属性は、フォームの送信方法を制御する formmethod 属性や、送信データをエンコードする方法を制御する formenctype 属性と組み合わせて使用できます。
• JavaScript を使用して、動的に formaction 属性の値を変更することもできます。

formaction 属性のサンプルコード

<form action="/default_action.php">
  <p>名前:</p>
  <input type="text" name="name">
  <p>メールアドレス:</p>
  <input type="text" name="email">
  <br>
  <input type="submit" value="送信">
  <br>
  <input type="submit" formaction="/other_action.php" value="別途送信">
</form>

このコードは、名前とメールアドレスを入力するフォームです。

• 最初の "送信" ボタンを押すと、入力されたデータは /default_action.php に送信されます。
• 2番目の "別途送信" ボタンを押すと、入力されたデータは /other_action.php に送信されます。

画像ボタンで URL を指定

<form action="/action.php">
  <p>画像をクリックして送信</p>
  <input type="image" src="submit.png" formaction="/other_action.php">
</form>

このコードは、"submit.png" 画像をクリックすると /other_action.php にデータを送信するフォームです。

JavaScript で formaction 属性を変更

<form action="/default_action.php">
  <p>送信先:</p>
  <select id="target">
    <option value="/action1.php">action1.php</option>
    <option value="/action2.php">action2.php</option>
  </select>
  <br>
  <input type="submit" value="送信">
</form>

<script>
const targetSelect = document.getElementById("target");
const submitButton = document.querySelector("input[type='submit']");

submitButton.addEventListener("click", () => {
  submitButton.formaction = targetSelect.value;
});
</script>

このコードは、select 要素で送信先を選択するフォームです。

• select 要素で選択した値が、formaction 属性に設定されます。
• "送信" ボタンを押すと、選択された URL にデータが送信されます。

確認画面を挟んで送信

<form action="/confirm.php">
  <p>名前:</p>
  <input type="text" name="name">
  <p>メールアドレス:</p>
  <input type="text" name="email">
  <br>
  <input type="submit" value="確認">
</form>

<script>
const form = document.querySelector("form");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = form.querySelector("input[name='name']").value;
  const email = form.querySelector("input[name='email']").value;

  // 確認画面を表示
  // ...

  if (confirm("送信してもよろしいですか？")) {
    form.action = "/action.php";
    form.submit();
  }
});
</script>

このコードは、名前とメールアドレスを入力

HTML フォーム送信方法の比較

action 属性

フォーム全体の送信先 URL を指定します。

利点

• 最もシンプルで汎用性の高い方法
• JavaScript を使用しなくても送信できる

欠点

• フォーム内に複数の送信ボタンがある場合、すべてのボタンで同じ URL に送信される
• 送信先 URL を動的に変更するには JavaScript が必要

formaction 属性

個々の送信ボタンの送信先 URL を指定します。

利点

• 複数の送信ボタンで異なる URL に送信できる
• JavaScript を使用しなくても送信先 URL を動的に変更できる

欠点

• action 属性よりも複雑
• 古いブラウザではサポートされていない

JavaScript

submit() メソッドや location.href プロパティを使用して、送信先 URL を動的に変更できます。

利点

• 最も柔軟な方法
• 送信先 URL を条件分岐で設定したり、ユーザー入力に基づいて変更したりできる

欠点

• JavaScript の知識が必要
• 他の方法よりも複雑

サーバーサイド処理

サーバー側のスクリプトを使用して、送信先 URL を決定できます。

利点

• フォーム送信後の処理もサーバー側でまとめて行える

欠点

• サーバー側の設定が必要

どの方法を選択するかは、要件と開発者のスキルによって異なります。

• シンプルなフォームの場合は、action 属性で十分です。
• 複数の送信ボタンで異なる URL に送信したい場合は、formaction 属性が便利です。
• 送信先 URL を動的に変更したい場合は、JavaScript を使用できます。
• サーバー側の処理と連携したい場合は、サーバーサイド処理を選択できます。