✋🏻
【JS】formのsubmit時にページ遷移させない方法
まず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