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.

Answer 1

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.

Answer 2

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>

Answer 3

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.

Answer 4

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

Answer 5

With Jquery:

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

Answer 6

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

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