How to create a HTML Cancel button that redirects to a URL

Question

I am playing with the Buttons in the w3schools Tryit editor, and I am trying to figure out how to make my browser redirect to an URL when I click on the "Cancel" button.

Here's what I have tried:

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

But it doesn't work. Any ideas?

Solution 1

cancel is not a valid value for a type attribute, so the button is probably defaulting to submit and continuing to submit the form. You probably mean type="button".

(The javascript: should be removed though, while it doesn't do any harm, it is an entirely useless label)

You don't have any button-like functionality though, so would be better off with:

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

… possibly with some CSS to make it look like a button.

Solution 2

There is no button type="cancel" in html. You can try like this

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

You can make it look like a button by using CSS style properties.

Solution 3

There are a few problems here.

First of all, there is no such thing as <button type="cancel">, so it is treated as just a <button>. This means that your form will be submitted, instead of the button taking you elsewhere.

Second, javascript: is only needed in href or action attributes, where a URL is expected, to designate JavaScript code. Inside onclick, where JavaScript is already expected, it merely acts as a label and serves no real purpose.

Finally, it's just generally better design to have a cancel link rather than a cancel button. So you can just do this:

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

With CSS you can even make it look the same as a button, but with this HTML there is absolutely no confusion as to what it is supposed to do.

Solution 4

it defaults to submitting a form, easiest way is to add "return false"

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

Solution 5

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

View more solutions

Comments

[Red Cricket]

Thanks! Kolink. Can you point me to documentation on how to make the link look like a button?

[JJJ]

The easiest way is to put the button inside the link.

[Konstantin]

if that was the case it would go to url, instead it submits the form, return false prevents form submission and then it actually redirects.

[Sobin Augustine]

asked for a cancel 'button' for redirect to a url, then why down votes

[Red Cricket]

I gave you an up vote. Thank you for your reply to my question.

[Red Cricket]

I gave you an up vote. Thank you for your reply to my question.

[slhck]

Perhaps you should consider adding a little explanation to your line of code. Context always helps – you could tell the OP what was wrong in their approach and why your answer solves the problem. See the answers by Kolink or Quentin to get the idea.

[Zach Smith]

perfect. no need to spend time adding CSS code when we can use this method. bravo.

[Noumenon]

To avoid getting a button with its label underlined like a link, use <button type="button">Cancel</button> instead of an input.

[Christian]

Why would you ever put a button inside a link? If this works, it's definitely quirky behaviour... Actually, HTML standards even disallow this: w3.org/TR/html-markup/…

[zzzzBov]

@Juhana, and that would be invalid markup, so please don't suggest it.

[zzzzBov]

This markup is dangerously invalid, and it concerns me that 21 people thought it was a good suggestion. Please either update your answer or delete it so that no one uses this code in a production environment.

[Chaim]

Do not let your style dictate your markup. Write your html and style it after. Writing html to achieve certain styles is the workaround. (Imagine you wanted blue underlined text so you used an a tag with `href='javascript:return false;' instead of styling the text)

[Chaim]

The issue here is that you seem to think time consuming = workaround. That's not true.

[TheSatinKnight]

Ya lost me. My goal was a button that showed the word reset, blended with the other buttons (user experience/look & feel) and of course did NOT submit the form. This accomplished all three quite nicely. As it happened, it also matches the posted question as all that is required is the substitution of any other URL for the php_self portion.

[Quentin]

HTML does not allow a <button> element inside an <a> element.

[Quentin]

HTML does not allow an <a> element inside a <button> element.

[Quentin]

That button now does nothing unless you bind some JavaScript to it.

[Noumenon]

Your May 2016 edit should have retained the original, 20-times-upvoted answer, and then explained why you now believe it is wrong. Replacing your original answer makes it appear that this answer is what earned the upvotes, it makes the comments confusing, and it is less instructive. It also makes this answer into a duplicate of the top answer.

[Forrest]

Good call out. I wasn't specifying the type, so my cancel was defaulting to submit. Thank you

[Robert]

More clean than any other