当前位置:   article > 正文

一个button的属性是submit 要怎么样才能点击button之后 既提交表单 也跳转到另外一个页面呢?_表单提交跳转到另一个页面

表单提交跳转到另一个页面

要实现点击按钮后既提交表单又跳转到另一个页面,你可以使用 JavaScript 来控制提交行为和页面跳转。

首先,你需要在按钮上添加一个点击事件的监听器,并在事件处理函数中执行提交表单的操作和跳转页面的操作。

示例代码如下:

```html
<form id="myForm" action="submit-page.php" method="POST">
  <!-- 表单内容 -->
  <button id="submitButton" type="button">提交</button>
</form>

<script>
document.getElementById("submitButton").addEventListener("click", function(e) {
  // 防止表单提交默认行为
  e.preventDefault();

  // 提交表单
  document.getElementById("myForm").submit();

  // 跳转到另一个页面
  window.location.href = "another-page.php";
});
</script>
```

上述代码中,首先给按钮添加了一个点击事件监听器。在事件处理函数中,我们使用 `e.preventDefault()` 防止按钮点击后默认提交表单的行为。然后,我们使用 `document.getElementById("myForm").submit()` 来触发表单提交。最后,通过 `window.location.href` 将页面跳转到另一个页面。

请注意,使用 `submit()` 方法提交表单会触发表单上设置的 `action` 和 `method` 属性所指定的提交行为。如果不需要实际提交到后端处理,可以将按钮的 `type` 属性设置为 `button`,而不是 `submit`。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小惠珠哦/article/detail/771749
推荐阅读
相关标签
  

闽ICP备14008679号