Как создать кнопку отмены HTML, которая перенаправляет на URL

Я играю с кнопки в Редакторе 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>

но это не работает. Есть идеи?

29
html html-form htmlbutton javascript

10 ответов

cancel не является допустимым значением для атрибута type, поэтому кнопка, вероятно, по умолчанию submit и продолжает подавать форму. Вы, вероятно, имеете в виду type="button".

(том javascript: следует удалить, хотя, хотя это не причиняет никакого вреда, это совершенно бесполезно метка)

у вас нет какой-либо кнопки, как функциональность, хотя, так что было бы лучше с:

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

... возможно, с немного CSS, чтобы сделать его похожим на кнопка.

46

нет button type="cancel" в html. Вы можете попробовать так

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

Вы можете сделать его похожим на кнопку с помощью CSS свойства.

20

здесь есть несколько проблем.

прежде всего, нет такой вещи, как <button type="cancel">, поэтому он рассматривается как просто <button>. Это означает, что ваша форма будет отправлена вместо кнопки, которая приведет вас в другое место.

во-вторых,javascript: требуется только в href или action атрибуты, где ожидается URL-адрес, для обозначения кода JavaScript. Внутри onclick, где JavaScript уже ожидается, он просто действует как метка и не служит реальным цель.

наконец, это просто, как правило, лучший дизайн, чтобы отменить ссылке вместо кнопки "Отмена". Таким образом, вы можете просто сделать это:

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

С CSS вы даже можете сделать его похожим на кнопку, но с этим HTML нет абсолютно никакой путаницы в том, что он должен делать.

13

по умолчанию он отправляет форму, самый простой способ-добавить "return false"

<button type="cancel" onclick="window.location='http://stackoverflow.com';return false;">Cancel</button>
11
<input class="button" type="button" onclick="window.location.replace('your_url')" value="Cancel" />
5

просто введите type= "button"

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

поскольку ваша кнопка находится внутри формы, она принимает значение по умолчанию как submit и type= "cancel" не существует.

4

это то, что я использую, попробуйте.

<a href="index.php"><button style ="position:absolute;top:450px;left:1100px;height:30px;width:200px;"> Cancel </button></a>
0
<button onclick=\"window.location='{$_SERVER['PHP_SELF']}';return false;\">Reset</button>

недостаточно репутации, чтобы голосовать за Костяна. Вот мое окончательное решение (нужна кнопка сброса).

еще раз спасибо Костяну за ответ на заданный вопрос, не предлагая "обходной" (трудоемкий) метод "построить кнопку" со стилями.

Это кнопка (которую зритель ожидает увидеть) и она работает именно так, как просили. И он смешивается с другими кнопками на странице. Без сложностей.

Я удалил "type=cancel", что, по-видимому, было бесполезно. Так что еще меньше кода. :)

-1

здесь я использую ссылку в виде кнопки для отмены операции.

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

С Jquery:

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