同一form内の押すボタンによってaction内容を変更する

概要

編集ページを作っている際に同じformタグ内に複数submitボタンが欲しい場合があったので、同一フォーム内で押すボタンによって、actionの内容を変更する方法を記載する

展開しやすいようにjQueryなどは使わず、素のJavaScriptで記載します。

実装イメージ

今回は同一ページ内に以下のようにbuttonタグを配置して、押したボタンによって指定のurlを叩くといった動作をさせます。

完成ソース

<form method="POST" id="punchForm" action="/work-start">
  <button onclick=submitClick() data-action="/work-start">出勤</button>
  <button onclick=submitClick() data-action="/break-start">休憩開始</button>
  <button onclick=submitClick() data-action="/break-end">休憩終了</button>
  <button onclick=submitClick() data-action="/work-end">退勤</button>
</form>

<script>
function submitClick(){
    let elm       = event.target;
    let actionUrl = elm.getAttribute("data-action");
    document.getElementById("punchForm").action = actionUrl;
}
</script>

解説

まずはfromタグを作ります。
■ method
呼び出すactionのリクエストに応じて指定します。今回はPOSTにしてます。
■ id
どのformのactonを変更するのかJS側で指定する必要があるので、任意の名前をつけます
■ action
書き換えるので、空欄でも大丈夫です。

<form method="POST" id="punchForm" action="/work-start">
</form>

次にbuttonタグ
■ onclick
ボタンが押された時に指定のJSのメソッドを呼び出すようにするので、任意のメソッド名をつけます
■ data-action
ボタンを押した時に発動してほしいactionのURLを指定します。
ちなみにhtmlは「data-任意名」でカスタム属性が作れるので、data-actionというタグは私が勝手に命名したもので、任意の名称をつけても構いません。
カスタム属性とは?

<form method="POST" id="punchForm" action="/work-start">
  <button onclick=submitClick() data-action="/work-start">出勤</button>
</form>

■ JavaScript
JSはまとめて下記のような動きになっています。

function submitClick(){
    // クリックされた要素を取得
    let elm       = event.target;

    // クリックされた要素の中で、指定された属性の値を取得
    let actionUrl = elm.getAttribute("data-action");

    //　指定したidのaction属性の値を書き換える
    document.getElementById("punchForm").action = actionUrl;
}

以上となります。
参考になれば幸いです。