如何创建重定向到URL的HTML取消按钮

Question

我正在使用w3schools Tryit编辑器中的按钮,我正在尝试弄清楚当我点击"取消"按钮时我的浏览器重定向到URL.

这是我尝试过的:

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <button type="submit" value="Submit">Submit</button>
  <button type="reset" value="Reset">Reset</button>
  <button type="cancel" onclick="javascript:window.location='http://stackoverflow.com';">Cancel</button>
</form>

但它不起作用.有任何想法吗？

Answer 1

cancel不是type属性的有效值,因此该按钮可能默认为submit并继续提交表单.你可能意味着type="button".

(javascript:应该删除,虽然它没有任何伤害,但它是一个完全无用的标签)

你没有任何类似按钮的功能,所以最好用:

<a href="http://stackoverflow.com"> Cancel </a>

...可能有一些CSS使它看起来像一个按钮.

Answer 2

button type="cancel"在html中没有.你可以这样试试

<a href="http://www.url.com/yourpage.php">Cancel</a>

您可以使用CSS样式属性使其看起来像一个按钮.

Answer 3

这里有一些问题.

首先,没有这样的东西<button type="cancel">,所以它被视为一个<button>.这意味着您的表单将被提交,而不是将您带到其他地方的按钮.

其次,javascript:仅在需要URL的属性href或action属性中指定JavaScript代码.在内部onclick,已经预期JavaScript,它只是作为一个标签,没有任何实际意义.

最后,通常更好的设计是拥有取消链接而不是取消按钮.所以你可以这样做:

<a href="http://stackoverflow.com/">Cancel</a>

使用CSS,你甚至可以使它看起来像一个按钮,但使用这个HTML,它绝对没有混淆它应该做什么.

Answer 4

它默认提交表单,最简单的方法是添加"return false"

<button type="cancel" onclick="window.location='http://stackoverflow.com';return false;">Cancel</button>

Answer 5

没有按钮类型取消 https://www.w3schools.com/jsref/prop_pushbutton_type.asp

为了实现取消功能，我使用了 DOM 历史记录

<button type="button" class="btn btn-primary" onclick="window.history.back();">Cancel</button>

欲了解更多详细信息：https ://www.w3schools.com/jsref/met_his_back.asp

Answer 6

<input class="button" type="button" onclick="window.location.replace('your_url')" value="Cancel" />

Answer 7

只需输入类型 =“按钮”

<button type="button"><b>Cancel</b></button>

因为您的按钮位于表单内，所以它采用默认值作为提交，并且 type="cancel" 不存在。