✋🏻

【JS】formのsubmit時にページ遷移させない方法

2022/02/23に公開

まずHTMLから。
buttonのタイプがsubmitだとページ遷移してしまうのでtypeをbuttonにしておく。

<form id="form" action="/example" method="post">
  <input type="text" value="hoge" />
  <button id="submit-button" type="button">送信</button>
</form>

あとはjsで、
buttonがクリックされたタイミングでformのデータをPOSTする。

const form = document.getElementById("form")
const submitButton = document.getElementById("submit-button")

submitButton.onclick = () => {
  const formData = new FormData(form)
  const action = form.getAttribute("action")
  const options = {
    method: 'POST',
    body: formData,
  }
  fetch(action, options).then((e) => {
    if(e.status === 200) {
      alert("保存しました。")
      return
    }
    alert("保存できませんでした。")
  })
}

Content-Typeを指定していないが、指定すると上手くいかないらしい。
参考:

これで何度でも、ページ遷移せずにPOSTし放題！

Discussion