首页 > 文章资讯 > 站长教程 > 建站知识 > form表单，点击提交之后，如果提交成功则弹窗提示提交成功，点击之后跳转新页面

form表单，点击提交之后，如果提交成功则弹窗提示提交成功，点击之后跳转新页面

时间：2023年10月23日

来源：网络

编辑：佚名

您可以使用JavaScript来实现此功能。具体步骤如下：
在form表单中添加一个提交按钮，并为其添加一个事件监听器。
在事件监听器中使用XMLHttpRequest对象来提交表单数据到服务器。
在XMLHttpRequest对象的onreadystatechange事件处理函数中检查服务器返回的状态码，如果是200则说明提交成功，此时弹出提示框。
在提示框中添加一个“确认”按钮，当用户点击确认按钮时，使用window.location.href属性跳转到新页面。
以下是示例代码：
<form id="myForm">

<input type="text" name="name">
<input type="email" name="email">
<button type="submit" id="submitBtn">提交</button>
</form>
<script>
const form = document.getElementById('myForm');
const submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener('click', function(event) {
event.preventDefault(); // 防止表单自动提交
const xhr = new XMLHttpRequest();
xhr.open('POST', '/submit');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
alert('提交成功！');
window.location.href = '/newpage'; // 跳转到新页面
}
};
xhr.send(new FormData(form));
});
</script>
请注意，上述示例代码仅用于演示如何实现所述功能，您需要根据实际情况对其进行调整。

新闻资讯更多

猜你需要