【JavaScript】submitイベントのリクエストURLを取得したい

Question

前提・実現したいこと

formをsubmit時に、_ev.preventDefault();でイベントをキャンセルさせ、リクエストURLを取得することは可能でしょうか？
サンプルコードの場合、/api/v1/url?id=1を取得したいです。

submitイベントにそのようなプロパティがあるのかと思い、
https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent
などを見たのですが、それらしきものが見つかりませんでした。

• form内のinputを全て取得してforなどでパラメータ文字列を作る
• fetch()で非同期で取得する

などは思いついたのですが、もっといい方法があるのかと思い、質問させて頂きました。

該当のソースコード

<form id="form" action="/api/v1/url" method="get">
  <input type="hidden" name="id" value="1">
</form>

<script>
form.addEventListener('submit', (_ev) => {
  _ev.preventDefault();
  const request = 'ここで /api/v1/url?id=1 を取得したい'
  console.log(request)
})
</script>

Comments

[m.ts10806]

用途は何でしょう

Answer 1

form.addEventListener('submit', (_ev) => {
  _ev.preventDefault();
  const request  =　form.getAttribute("action")+"?"+ [...new FormData(form)].map(arg=>arg.map(encodeURIComponent).join('=')).join("&");
  console.log(request);
});

Comments

[true_colors_20]

ありがとうございます。FormDataを初めて知りました。