web-dev-qa-db-fra.com

Comment créer un bouton Annuler HTML qui redirige vers une URL

Je joue avec les boutons de l'éditeur w3schools Tryit , et j'essaie de trouver un moyen de rediriger mon navigateur vers une URL lorsque je clique sur le bouton "Annuler".

Voici ce que j'ai essayé:

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

Mais ça ne marche pas. Des idées?

javascripthtmlformshtmlbutton
30
Red Cricket

cancel n'est pas une valeur valide pour un attribut de type, le bouton est donc probablement par défaut sur submit et continue de soumettre le formulaire. Vous voulez probablement dire type="button".

(Le javascript: devrait être supprimé cependant, bien que cela ne fasse aucun mal, c’est un outil totalement inutile label )

Cependant, vous n’avez aucune fonctionnalité semblable à un bouton, il serait donc préférable d’utiliser:

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

… Éventuellement avec du CSS pour que ça ressemble à un bouton.

51
Quentin

Il n'y a pas button type="cancel" en HTML. Tu peux essayer comme ça

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

Vous pouvez le faire ressembler à un bouton en utilisant les propriétés de style CSS.

20
RJ Anoop

Il y a quelques problèmes ici.

Tout d'abord, il n'y a rien de tel que <button type="cancel">, il est donc traité comme un simple <button>. Cela signifie que votre formulaire sera soumis au lieu que le bouton vous mène ailleurs.

Seconde, javascript: n'est nécessaire que dans les attributs href ou action, dans lesquels une URL est prévue, pour désigner le code JavaScript. À l'intérieur de onclick, où JavaScript est déjà attendu, il agit simplement comme une étiquette et ne sert à rien.

Enfin, il est généralement préférable d'avoir un bouton d'annulation lien plutôt qu'un bouton d'annulation. Donc, vous pouvez simplement faire ceci:

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

Avec CSS, vous pouvez même faire en sorte qu’il ressemble à un bouton, mais avec ce code HTML, il n’ya aucune confusion quant à ce qu’il est censé faire.

13
Niet the Dark Absol

la valeur par défaut est la soumission d'un formulaire, la méthode la plus simple consiste à ajouter "return false"

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

Il suffit de mettre le type = "bouton"

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

Parce que votre bouton est dans un formulaire, il prend la valeur par défaut car submit et le type = "cancel" n’existent pas.

4
shadow0359

Il n'y a pas de type de bouton annuler https://www.w3schools.com/jsref/prop_pushbutton_type.asp

Pour obtenir la fonctionnalité d'annulation, j'ai utilisé l'historique DOM

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

Pour plus de détails: https://www.w3schools.com/jsref/met_his_back.asp

0
SoSen