CODEWITHSUNDEEP
javascripthtmlforms
Red Cricket
Red Cricket

Reputation: 10480

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

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?

Upvotes: 53

Views: 281700

Answers (13)

jpgerb
jpgerb

Reputation: 1120

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';
}

Upvotes: 0

Atif
Atif

Reputation: 31

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.

Upvotes: 2

SoSen
SoSen

Reputation: 339

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

Upvotes: 8

user8767519
user8767519

Reputation:

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>

Upvotes: -1

ns15
ns15

Reputation: 8834

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.

Upvotes: 6

bhanu
bhanu

Reputation: 7

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

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

Upvotes: -1

RJ Anoop
RJ Anoop

Reputation: 777

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.

Upvotes: 21

Pitbi
Pitbi

Reputation: 83

With Jquery:

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

Upvotes: -2

TheSatinKnight
TheSatinKnight

Reputation: 744

<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. :)

Upvotes: -1

Konstantin
Konstantin

Reputation: 3294

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>

Upvotes: 15

Sobin Augustine
Sobin Augustine

Reputation: 3775

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

Upvotes: 7

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324790

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.

Upvotes: 16

Quentin
Quentin

Reputation: 944448

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.

Upvotes: 82

Related Questions