2024-01-31 `form` の `action` と別に設定した `submit` ボタンの `formaction` を取得する

はじめに

formで設定された action とは別の action(formaction) が設定された submit ボタンがある中で、クリックされた送信ボタンの formaction を取得したい。

<form method="post" name="sample" action="/main-submit">
  <button type="submit" name="B" formaction="/sub-submit">これを取得したい(別の送信ボタン)</button>
  <button type="submit" name="A">送信</button>
</form>

<button name="C" type="button">フォーム外の送信ではないボタン</button>
  

activeElement プロパティを使うと取得できる

こちらの回答では、 activeElement プロパティを使ってクリックされたボタンを特定してから formaction を取得している。
この場合 name="B" のボタンをクリックするとその formaction が取得される。 form の submit ボタンをクリックすると元々設定された action が取得される。

javascript - How to get formaction in submit event? - Stack Overflow
https://stackoverflow.com/a/51990326

  $("form").submit(function(e) {
    let formAction = e.target.getAttribute("action");
    let activeElementAction = document.activeElement.getAttribute("formaction");
    let action = activeElementAction || formAction;
    console.log(action);

    e.preventDefault();
  }); 

　　 // この方法でも可
  $("button").on('click', function(e) {
      let activeElementName = document.activeElement.getAttribute("name");
      console.log('activeElement name: ' + activeElementName);
  });

また、下記ドキュメントの通り activeElement は「DOM内で現在フォーカスを持っている要素」としているので、ボタンがクリックされたイベントでクリックされたボタンを特定することも可能。

Document: activeElement プロパティ - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Document/activeElement

サンプル
https://codepen.io/ysd-marrrr/pen/PoLeoop

送信実行時に form の action を取得すると元の action が取得される(失敗)

こちらは name="B" のボタンをクリックしても form に設定された formaction (/main-submit)が取得される。

javascript - get action of submitted form - Stack Overflow
https://stackoverflow.com/questions/16087018/get-action-of-submitted-form

$("form").submit(function() {
    //some stuff...

    //get form action:
    var formAction = $(this).attr("action");

    //some other stuff...
});