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

JavaScript

概要

編集ページを作っている際に同じ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;
}

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

ユーザー登録して、Qiitaをもっと便利に使ってみませんか。

あなたにマッチした記事をお届けします
ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
便利な情報をあとで効率的に読み返せます
気に入った記事を「ストック」することで、あとからすぐに検索できます

より詳しく

@chin-zabro

はんなりWEBエンジニア。

@4772905

2022-04-16 20:46

（編集済み）

私だったら全てのボタンにonclickを付けるのではなく、こうするかな。

<form method='post' id='punchForm'>
  <button data-action='/work-start'>出勤</button>
  <button data-action='/break-start'>休憩開始</button>
  <button data-action='/break-end'>休憩終了</button>
  <button data-action='/work-end'>退勤</button>
</form>

<script>
const f = document.getElementById('punchForm');
f.addEventListener('click', e => {
  const t = e.target.dataset.action;
  if(t) f.action = t;
});
</script>

あなたもコメントしてみませんか :)

ユーザー登録

すでにアカウントを持っている方はログイン

記事投稿イベント開催中

新人プログラマ応援 - みんなで新人を育てよう！

2022/03/27~2022/04/30

データに関する記事を書こう！

2022/03/14~2022/04/30

すべて見る

記事の改善

編集リクエストを送る

記事の情報

編集履歴編集リクエスト一覧 LGTMしたユーザー一覧 Markdown で本文を見る