所以我想制作一个纯html和javascript表单并将其提交到服务器。
这是我的 html 表单代码:
<form id="email-signup" action="http://www.server.com" method="post">
<input id="firstname-input" type="hidden" name="firstname" value="">
<input type="text" name="email" placeholder="Input Email">
<input type="hidden" name="campaign[id]" value="1">
<input type="hidden" name="campaign[name]" value="Text Campaign">
<input type="submit" value="Submit">
</form>
这是我的 JavaScript 代码:
var element = document.getElementById("email-signup");
element.addEventListener("submit", function(event) {
event.preventDefault()
fetch("http://www.endpoint.api", {
method: "POST",
body: new FormData(document.getElementById('email-signup'))
})
})
.then(() => {
alert('Selamat email anda sudah terdaftar!')
})
问题是,每当我向该表单提交电子邮件时,它都会将我重定向到一个新页面并显示成功响应。我想防止这种情况发生,而是会弹出一个警报,告诉我电子邮件提交已成功。
你把.then
在错误的地方 - 将其放在正确的位置之后fetch
,而不是在事件监听器之后。
var element = document.getElementById("email-signup");
element.addEventListener("submit", function(event) {
event.preventDefault()
fetch("", {
method: "POST",
body: new FormData(document.getElementById('email-signup'))
}).then((res) => {
if (res.ok) alert('Selamat email anda sudah terdaftar!')
})
})
一致的缩进将帮助您避免将来出现类似问题。 (看到你的问题,我修复了格式 - 应该很清楚现在的问题是什么)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)