Como criar um botão de Cancelamento HTML que redirecciona para um URL

estou a brincar com os botões do editor de Tryit do w3schools, e estou a tentar descobrir como fazer o meu navegador redireccionar para um URL quando carregar no botão "Cancelar".

Eis o que tentei:

<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>
Mas não funciona. Alguma ideia?

Author: GreenAsJade, 2013-08-23

10 answers

cancel não é um valor válido para um atributo type, por isso o botão está provavelmente em falta para submit e continua a enviar o formulário. Provavelmente queres dizer type="button".

(o javascript: deve ser removido embora, embora não faça nenhum mal, é um rótulo inteiramente inútil )

Você não tem nenhuma funcionalidade tipo botão, então seria melhor se:

<a href="http://stackoverflow.com"> Cancel </a>
... Possivelmente com algum CSS para parecer um botão.
 46
Author: Quentin, 2013-08-23 16:43:48

Não existe button type="cancel" no html. Podes tentar assim.

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

Você pode fazer com que pareça um botão usando propriedades do estilo CSS.

 20
Author: RJ Anoop, 2016-05-16 06:03:31
Há alguns problemas aqui.

Em primeiro lugar, não existe tal coisa como <button type="cancel">, por isso é tratado como apenas um <button>. Isto significa que o seu formulário será submetido, em vez do botão levá-lo para outro lugar.

Second, javascript: is only needed in href or action, where a URL is expected, to designate JavaScript code. Dentro de onclick, onde JavaScript já é esperado, ele simplesmente atua como um rótulo e não serve a nenhum propósito real.

Finalmente, é geralmente melhor design para ter uma ligação de cancelamento em vez de um botão de cancelamento. Por isso, podes fazer isto.
<a href="http://stackoverflow.com/">Cancel</a>

Com CSS você pode até fazê-lo parecer o mesmo que um botão, mas com este HTML não há absolutamente nenhuma confusão sobre o que ele deve fazer.

 13
Author: Niet the Dark Absol, 2013-08-23 16:43:55

É por omissão a apresentação de um formulário, a maneira mais fácil é adicionar "return false"

<button type="cancel" onclick="window.location='http://stackoverflow.com';return false;">Cancel</button>
 11
Author: Konstantin, 2013-08-23 16:45:54
<input class="button" type="button" onclick="window.location.replace('your_url')" value="Cancel" />
 5
Author: Sobin Augustine, 2013-08-23 16:45:39

Basta colocar o tipo= "botão"

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

Porque o seu botão está dentro de um formulário, está a tomar o valor por omissão como submit E type="cancelar" não existe.

 4
Author: shadow0359, 2017-01-25 10:01:20
É isso que estou a usar.
<a href="index.php"><button style ="position:absolute;top:450px;left:1100px;height:30px;width:200px;"> Cancel </button></a>
 0
Author: , 2017-11-29 17:19:00
<button onclick=\"window.location='{$_SERVER['PHP_SELF']}';return false;\">Reset</button>
Não há representante suficiente para votar no Kostyan. Aqui está a minha solução final (precisava de um botão de reiniciar). Mais uma vez, obrigado a Kostyan por responder à pergunta, sem Sugerir um método "workaround" (demorado) para "construir um botão" com estilos.

Este é um botão (que o visualizador espera ver) e funciona exactamente como foi pedido. E mistura-se com os outros botões da página. Sem complexidade.

Eu removi o "tipo=Cancelar" que aparentemente era inútil. Então ainda menos código. :)

 -1
Author: TheSatinKnight, 2014-03-05 03:43:44

Aqui, estou a usar o link na forma de botão para cancelar a operação.

<button><a href="main.html">cancel</a></button>
 -1
Author: bhanu, 2016-07-25 10:54:45

Com Jquery:

$(".cancel-button").click(function (e) {
  e.preventDefault();
});
 -2
Author: Pitbi, 2014-08-19 10:20:52