Question

我正在玩Buttons in the w3schools Tryit editor，我正在尝试弄清楚当我点击“取消”按钮时我的浏览器会重定向到网址。

以下是我的尝试：

<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:应该被移除，但它没有造成任何伤害，但它完全无用label）

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

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

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

Answer 2

html中没有button type="cancel"。你可以试试这个

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

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

Answer 3

这里有一些问题。

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

其次，只有javascript:或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

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

Answer 6

只需输入type =＆＃34;按钮＆＃34;

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

因为您的按钮位于表单内，所以它将默认值设置为提交并输入=＆＃34;取消＆＃34;不存在。

Answer 7

没有按钮类型取消 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 8

这就是我正在使用的尝试。

<a href="index.php"><button style ="position:absolute;top:450px;left:1100px;height:30px;width:200px;"> Cancel </button></a>

Answer 9

<button onclick=\"window.location='{$_SERVER['PHP_SELF']}';return false;\">Reset</button>

没有足够的代表为Kostyan投票。这是我的最终解决方案（需要重置按钮）。

再次感谢Kostyan在回答问题时提出的问题而没有建议＆＃34;解决方法＆＃34; （耗时）方法来构建一个按钮＆＃34;风格。

这是一个Button（观众希望看到的），它完全按照要求工作。它与页面上的其他按钮混合在一起。没有复杂性。

我确实删除了＆＃34; type = cancel＆＃34;这显然是没用的。所以甚至更少的代码。：）

Answer 10

在这里，我使用按钮形式的链接进行取消操作。

<button><a href="main.html">cancel</a></button>

Answer 11

使用Jquery：

$(".cancel-button").click(function (e) {
  e.preventDefault();
});

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

11 个答案: