[HTML] 複数のボタンでアクション先を変える方法

背景

1つのフォームに送信ボタンが複数ある場合、それぞれのボタンでPOST/GETの向き先（action）を変えたい。

例えば、同一のフォームの中に「検索ボタン」と「CSV出力ボタン」というボタンがそれぞれ存在している状況。フォームの入力値としては共通なため同じ入力値をサーバ側では受け取りたい場合、フォームを同じにしてボタンでactionを変えたいケース。

方法

JavaScript

<!-- HTMLだけ -->
<form>
  <button onClick="form.action='/search'">SEARCH</button>
  <button onClick="form.action='/csv'">CSV</button>
</form>

<!-- HTML + JavaScript -->
<form id="form">
  <button id="searchButton">SEARCH</button>
  <button id="csvButton">CSV</button>
</form>

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

  document.getElementById('searchButton').addEventListener('click', () => {
    form.action = '/search';
  });

  document.getElementById('csvButton').addEventListener('click', () => {
    form.action = '/csv';
  });
</script>

HTML

<form>要素の属性は、子要素の属性で上書きできる。今回は action 属性を上書きしたいので formaction 属性を使う。

formaction
このボタンによって送信された情報を処理する URL です。このボタンのフォームオーナーの action 属性よりも優先されます。フォームオーナーがない場合は何もしません。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/button#formaction

コードとしては以下のようになる。

<form>
  <button formaction="/search">SEARCH</button>
  <button formaction="/csv">CSV</button>
</form>