我有一个基本的html表单，当用户成功提交表单时，我会显示一个弹出窗口。然而，在这段时间里发生了两件事：
- 弹出窗口仅显示1-2秒
- 页面被重新加载，因此返回页面顶部
我想避免这两个事件，显然我必须使用event.preventDefault()，但我不知道在哪里使用
const messageSubmitContactForm = () => {
const form = document.getElementById("contact-form");
form.onsubmit = function(){
displayPopUpSent()
};
}
const displayPopUpSent = () => {
const popup = document.getElementById("popup-sent");
popup.style.display="block";
}
const app = () => {
messageSubmitContactForm();
}
app();
表单
<form id="contact-form" method="post" action="" enctype="multipart/form-data"> content </form>
您应该在这里使用
form.onsubmit = function(event){
event.preventDefault();
displayPopUpSent()
};
更新：
您也需要在<form>元素中添加actionurl(目前它是一个空字符串(
我创建了一个简单的片段来说明一点，也许这会为你澄清。
const messageSubmitContactForm = () => {
const form = document.getElementById("contact-form");
form.onsubmit = function(event) {
event.preventDefault();
displayPopUpSent()
};
}
const displayPopUpSent = () => {
const popup = document.getElementById("popup-sent");
popup.style.display = "block";
}
const app = () => {
messageSubmitContactForm();
}
app();<html>
<body>
<form id="contact-form" method="post" action="" enctype="multipart/form-data">
<input type="text" name="message" />
<button type="submit">Submit</button>
</form>
<div id="popup-sent" style="display: none">Data is sent</div>
</body>
</html>