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    x000D   x000D   lt form action  demo form asp  method  get  gt  x000D    First name   lt input type  text  name  fname  gt  lt br gt  x000D    Last name   lt input type  text  name  lname  gt  lt br gt  x000D     lt button type  submit  value  Submit  gt Submit lt  button gt  x000D     lt button type  reset  value  Reset  gt Reset lt  button gt  x000D     lt button type  cancel  onclick  javascript window location  http   stackoverflow com    gt Cancel lt  button gt  x000D   lt  form gt  x000D   x000D   x000D    But it doesn t work   Any ideas

User · Answer

lt button onclick   window location     SERVER  PHP SELF     return false    gt Reset lt  button gt    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

User · Answer

There are a few problems here   First of all  there is no such thing as  lt button type  cancel  gt   so it is treated as just a  lt button gt   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    lt a href  http   stackoverflow com   gt Cancel lt  a gt    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

User · Answer

There is no button type cancel  https   www w3schools com jsref prop pushbutton type asp  To achieve cancel functionality I used DOM history   x000D   x000D   lt button type  button  class  btn btn-primary  onclick  window history back     gt Cancel lt  button gt  x000D   x000D   x000D    For more details   https   www w3schools com jsref met his back asp

User · Answer

it defaults to submitting a form  easiest way is to add  return false    lt button type  cancel  onclick  window location  http   stackoverflow com  return false   gt Cancel lt  button gt

User · Answer

Thats what i am using try it    lt a href  index php  gt  lt button style   position absolute top 450px left 1100px height 30px width 200px   gt  Cancel  lt  button gt  lt  a gt

User · Answer

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    lt a href  http   stackoverflow com  gt  Cancel  lt  a gt        possibly with some CSS to make it look like a button

User · Answer

Just put type  button    lt button type  button  gt  lt b gt Cancel lt  b gt  lt  button gt    Because your button is inside a form it is taking default value as submit and type  cancel  doesn t exist

User · Answer

With Jquery       cancel-button   click function  e      e preventDefault

User · Answer

There is no button type  cancel  in html  You can try like this   lt a href  http   www url com yourpage php  gt Cancel lt  a gt    You can make it look like a button by using CSS style properties

User · Answer

lt input class  button  type  button  onclick  window location replace  your url    value  Cancel    gt

User · Answer

Here  i am using link in the form of button for CANCEL operation    lt button gt  lt a href  main html  gt cancel lt  a gt  lt  button gt

[javascript] How to create a HTML Cancel button that redirects to a URL

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to htmlbutton