javascript - redireccionar - dos botones en un formulario html

Cómo crear un botón Cancelar HTML que redirige a una URL

Question

Estoy jugando con los Botones en el editor de w3schools Tryit , y estoy tratando de averiguar cómo hacer que mi navegador redirija a una URL cuando hago clic en el botón "Cancelar".

Esto es lo que he intentado:

<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>

Pero no funciona. ¿Algunas ideas?

Answer 1

Aquí, estoy usando el enlace en forma de botón para la operación CANCELAR.

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

Answer 2

Con Jquery:

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

Answer 3

Eso es lo que estoy usando probarlo.

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

Answer 4

Hay algunos problemas aquí.

En primer lugar, no hay tal cosa como <button type="cancel"> , por lo que se trata como un <button> . Esto significa que se enviará su formulario, en lugar de que el botón lo lleve a otra parte.

Segundo, javascript: solo se necesita en href o atributos de action , donde se espera una URL, para designar el código JavaScript. Dentro de onclick , donde ya se espera JavaScript, simplemente actúa como una etiqueta y no sirve para nada.

Finalmente, en general es mejor diseñar un enlace de cancelación en lugar de un botón de cancelación. Así que puedes hacer esto:

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

Con CSS, incluso puede hacer que se vea igual que un botón, pero con este HTML no hay absolutamente ninguna confusión en cuanto a lo que se supone que debe hacer.

Answer 5

No hay button type="cancel" en html. Puedes probar así

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

Puedes hacer que se vea como un botón usando propiedades de estilo CSS.

Answer 6

Por defecto enviar un formulario, la forma más sencilla es agregar "devolver falso"

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

Answer 7

Simplemente ponga tipo = "botón"

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

Debido a que su botón está dentro de un formulario, está tomando el valor predeterminado como enviar y el tipo = "cancelar" no existe.

Answer 8

cancel no es un valor válido para un atributo de tipo, por lo que es probable que el botón omita el submit y continúe enviando el formulario. Probablemente te refieres a type="button" .

(El javascript: debe eliminarse, aunque no hace ningún daño, es una label completamente inútil)

Sin embargo, no tienes ninguna funcionalidad similar a un botón, por lo que sería mejor con:

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

... posiblemente con algo de CSS para que se vea como un botón.

Answer 9

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

No hay suficiente representante para votar por Kostyan. Aquí está mi solución final (se necesita un botón de reinicio).

Gracias de nuevo a Kostyan por responder a la pregunta como se hizo sin sugerir un método de "solución" (que consume mucho tiempo) para "construir un botón" con estilos.

Este es un botón (que el espectador espera ver) y funciona exactamente como se solicita. Y se mezcla con los otros botones de la página. Sin complejidad.

Quité el "tipo = cancelar" que aparentemente era inútil. Así que incluso menos código. :)

Answer 10

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