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?

Punt

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

Vitus

I find it funny that 10 years later, I wrote two articles about exactly this and people are reacting like I'm stating something unheard of. You are correct. It's a link. (although refrain from making it look like a button, but let it be a link instead) – Crankle

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

Upswing

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

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/… – Declinature

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. – Keenakeenan

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. – Shelah

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

Benge

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

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

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

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

Pickings

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. – Pickings

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

Answer 5

There is no button type cancel https://www.w3schools.com/jsref/prop_pushbutton_type.asp

To achieve cancel functionality I used DOM history

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

For more details : https://www.w3schools.com/jsref/met_his_back.asp

Aliphatic

More clean than any other – Chancy

Answer 6

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

Hooper

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

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

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. – Heraclitus

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

Answer 7

Just put type="button"

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

Because your button is inside a form it is taking default value as submit and type="cancel" doesn't exist.

Filch

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

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

Answer 8

I know this is old, but I wanted to offer my view on this.

What I tend to do, for better or worse, in trying to prevent use of inline 'onclick' code, is the following:

• Assign type="button" to the cancel button within a form, then
• set a href="/wherever_page_needs_to_go" attribute (alt tags, titles, etc. which are not included in the code below),
• set a specific class to the button, e.g. "btn-cancel", so that it can be selected if a specific need requires it (although in the code below the class is not needed for selection, it may be required for css styling, though),
• link to a JavaScript code in a separate file.

Code for btn-events.js (for me generally located in /public/js folder):

// Select all form buttons with href attribute in DOM
const buttons = document.querySelectorAll('form button[href]');

// Add event listeners for selected buttons
buttons.forEach(btn => {
    const href = btn.getAttribute('href');
    btn.addEventListener('click', evt => window.open(href, target = '_self'));
});

Then in HTML:

 <button class="btn-cancel" type="button" href="/wherever">Cancel</button>

Also, in HTML just before the ending body tag, link the script:

 <script src="js/btn-events.js"></script>

This method allows me to control some of the other buttons I occasionally have within the form and which do not submit anything but are purely "navigational" in nature.

Reste

Answer 9

Here's what I came up with.

HTML

<form action="demo_form.asp" method="get">
  <label for='fname'>First name: </label><input type="text" id='fname' name="fname"/>
  <label for='lname'>Last name: </label><input type="text" id='lname' name="lname"/>
  <input type="submit" value="Submit"/>
  <input type="reset" value="Reset"/>
  <button id='cancel' onclick='cancel_form()'>Cancel</button>
</form>

JS

function cancel_form() {
    window.location.href = 'http://example.com';
}

Prescriptive

Answer 10

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

Not enough rep to Vote Up for Kostyan. Here's my final solution (needed a reset button).

Thanks again to Kostyan for answering the question as asked without suggesting a "workaround" (time-consuming) method to "construct a button" with styles.

This is a Button (which the viewer expects to see) and it works exactly as requested. And it mingles with the other buttons on the page. Without complexity.

I did remove the "type=cancel" which apparently was useless. So even less code. :)

Amelita

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) – Sundog

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

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. – Amelita

Answer 11

Here, i am using link in the form of button for CANCEL operation.

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

Lode

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

Answer 12

Thats what i am using try it.

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

Yand

Answer 13

With Jquery:

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

Utmost