Can I make a button not submit a form

Question

I ve got a form  with 2 buttons   lt a href  index html  gt  lt button gt Cancel changes lt  button gt  lt  a gt    lt button type  submit  gt Submit lt  button gt    I use jQuery UI s button on them too  simply like this     button   button      However  the first button also submits the form  I would have thought that if it didn t have the type  submit   it wouldn t   Obviously I could do this     button type  submit    click function event    event stopPropagation          But is there a way I can stop that back button from submitting the form without JavaScript intervention   To be honest  I used a button only so I could style it with jQuery UI  I tried calling button   on the link and it didn t work as expected  looked quite ugly

User · Answer

The button element has a default type of submit   You can make it do nothing by setting a type of button    lt button type  button  gt Cancel changes lt  button gt

User · Answer

Yes  you can make a button not submit a form by adding an attribute of type of value button   lt button type  button  gt  lt button gt

User · Answer

lt form class  form-horizontal  method  post  gt           lt div class  control-group  gt                lt input type  text  name  subject code  id  inputEmail  placeholder  Subject Code  gt           lt  div gt           lt div class  control-group  gt               lt input type  text  class  span8  name  title  id  inputPassword  placeholder  Subject Title  required gt           lt  div gt           lt div class  control-group  gt               lt input type  text  class  span1  name  unit  id  inputPassword  required gt           lt  div gt               lt div class  control-group  gt               lt label class  control-label  for  inputPassword  gt Semester lt  label gt               lt div class  controls  gt                   lt select name  semester  gt                       lt option gt  lt  option gt                       lt option gt 1st lt  option gt                       lt option gt 2nd lt  option gt                   lt  select gt               lt  div gt           lt  div gt            lt div class  control-group  gt               lt label class  control-label  for  inputPassword  gt Deskripsi lt  label gt               lt div class  controls  gt                       lt textarea name  description  id  ckeditor full  gt  lt  textarea gt    lt script gt CKEDITOR replace  ckeditor full    lt  script gt               lt  div gt           lt  div gt              lt div class  control-group  gt           lt div class  controls  gt            lt button name  save  type  submit  class  btn btn-info  gt  lt i class  icon-save  gt  lt  i gt  Simpan lt  button gt           lt  div gt           lt  div gt           lt  form gt            lt  php         if  isset   POST  save               subject code     POST  subject code             title     POST  title             unit     POST  unit             description     POST  description             semester     POST  semester               query   mysql query  select   from subject where subject code     subject code    or die mysql error              count   mysql num rows  query            if   count  gt  0     gt           lt script gt          alert  Data Sudah Ada             lt  script gt           lt  php          else          mysql query  insert into subject  subject code subject title description unit semester  values   subject code    title    description    unit    semester    or die mysql error               mysql query  insert into activity log  date username action  values NOW     user username   Add Subject  subject code    or die mysql error                 gt           lt script gt          window location    subjects php            lt  script gt           lt  php                                gt

User · Answer

Without setting the type attribute  you could also return false from your OnClick handler  and declare the onclick attribute as onclick  return onBtnClick event

User · Answer

The default value for the type attribute of button elements is  submit   Set it to type  button  to produce a button that doesn t submit the form    lt button type  button  gt Submit lt  button gt    In the words of the HTML Standard   Does nothing

User · Answer

Just use good old HTML    lt input type  button  value  Submit    gt    Wrap it as the subject of a link  if you so desire    lt a href  http   somewhere com  gt  lt input type  button  value  Submit    gt  lt  a gt    Or if you decide you want javascript to provide some other functionality    lt input type  button  value  Cancel  onclick  javascript  someFunctionThatCouldIncludeRedirect      gt

User · Answer

lt form onsubmit  return false   gt          lt  form gt

User · Answer

Honestly  I like the other answers   Easy and no need to get into JS   But I noticed that you were asking about jQuery   So for the sake of completeness  in jQuery if you return false with the  click   handler  it will negate the default action of the widget   See here for an example  and more goodies  too    Here s the documentation  too   in a nutshell  with your sample code  do this    lt script type  text javascript  gt         button type  submit    click function               code to cancel changes         return false           lt  script gt    lt a href  index html  gt  lt button gt Cancel changes lt  button gt  lt  a gt   lt button type  submit  gt Submit lt  button gt    As an added benefit  with this  you can get rid of the anchor tag and just use the button

[javascript] Can I make a <button> not submit a form?

Examples related to javascript

Examples related to html

Examples related to jquery

Examples related to jquery-ui

Examples related to htmlbutton