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

您可以使用JavaScript来实现此功能。具体步骤如下:

  1. 在form表单中添加一个提交按钮,并为其添加一个事件监听器。
  2. 在事件监听器中使用XMLHttpRequest对象来提交表单数据到服务器。
  3. 在XMLHttpRequest对象的onreadystatechange事件处理函数中检查服务器返回的状态码,如果是200则说明提交成功,此时弹出提示框。
  4. 在提示框中添加一个“确认”按钮,当用户点击确认按钮时,使用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>

请注意,上述示例代码仅用于演示如何实现所述功能,您需要根据实际情况对其进行调整。

© 版权声明
THE END
喜欢就支持一下吧
点赞6
评论 抢沙发

请登录后发表评论

    暂无评论内容