JavaScriptで実現！HTMLフォームに2つの送信ボタンを設置する方法

2024-04-02

実装方法

HTMLフォームに2つの送信ボタンを設置するには、以下の方法があります。

type属性

それぞれのボタンのtype属性をsubmitに設定します。

<form action="/action_page.php">
  <input type="submit" value="送信">
  <input type="submit" value="キャンセル">
</form>

この場合、どちらのボタンをクリックしても、フォームはaction_page.phpに送信されます。

name属性

<form action="/action_page.php">
  <input type="submit" name="action" value="送信">
  <input type="submit" name="action" value="キャンセル">
</form>

この場合、どちらのボタンをクリックしても、フォームはaction_page.phpに送信されますが、actionという名前のクエリパラメータが送信されます。送信される値は、クリックしたボタンのvalue属性によって異なります。

formaction属性

<form>
  <input type="submit" formaction="/action_page1.php" value="送信1">
  <input type="submit" formaction="/action_page2.php" value="送信2">
</form>

この場合、ボタン1をクリックするとフォームはaction_page1.phpに送信され、ボタン2をクリックするとフォームはaction_page2.phpに送信されます。

<form>
  <input type="submit" formmethod="post" value="送信">
  <input type="submit" formmethod="get" value="キャンセル">
</form>

この場合、ボタン1をクリックするとフォームはPOSTメソッドで送信され、ボタン2をクリックするとフォームはGETメソッドで送信されます。

JavaScriptを使用して、送信ボタンの動作を制御することもできます。

<form>
  <input type="submit" id="submit1" value="送信1">
  <input type="submit" id="submit2" value="送信2">
</form>

<script>
document.getElementById("submit1").onclick = function() {
  // 送信処理1
};

document.getElementById("submit2").onclick = function() {
  // 送信処理2
};
</script>

この場合、ボタン1をクリックすると送信処理1が実行され、ボタン2をクリックすると送信処理2が実行されます。

上記のいずれの方法を使用しても、HTMLフォームに2つの送信ボタンを設置することができます。それぞれの方法のメリットとデメリットを理解して、状況に合わせて最適な方法を選択してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
</head>
<body>
  <form action="/action_page.php" method="post">
    <input type="submit" name="action" value="送信">
    <input type="submit" name="action" value="キャンセル">
  </form>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
</head>
<body>
  <form action="/action_page.php" method="post">
    <input type="submit" id="submit1" value="送信1">
    <input type="submit" id="submit2" value="送信2">
  </form>

  <script>
  document.getElementById("submit1").onclick = function() {
    // 送信処理1
  };

  document.getElementById("submit2").onclick = function() {
    // 送信処理2
  };
  </script>
</body>
</html>

上記のコードを参考に、ご自身の目的に合った方法でHTMLフォームに2つの送信ボタンを設置してください。

HTMLフォームに2つの送信ボタンを設置する他の方法

formaction属性を使用して、それぞれのボタンの送信先を指定することができます。

<form>
  <input type="submit" formaction="/action_page1.php" value="送信1">
  <input type="submit" formaction="/action_page2.php" value="送信2">
</form>

<form>
  <input type="submit" formmethod="post" value="送信">
  <input type="submit" formmethod="get" value="キャンセル">
</form>

<form>
  <input type="submit" id="submit1" value="送信1">
  <input type="submit" id="submit2" value="送信2">
</form>

<script>
document.getElementById("submit1").onclick = function() {
  // 送信処理1
};

document.getElementById("submit2").onclick = function() {
  // 送信処理2
};
</script>

画像を使う

送信ボタンの代わりに画像を使用して、フォームを送信することもできます。

<form action="/action_page.php" method="post">
  <input type="image" src="submit1.png" alt="送信1">
  <input type="image" src="submit2.png" alt="送信2">
</form>