HTML button to NOT submit form

Question

I have a form  Outside that form  I have a button  A simple button  like this    lt button gt My Button lt  button gt    Nevertheless  when I click it  it submits the form  Here s the code    lt form id  myform  gt       lt input   gt   lt  form gt   lt button gt My Button lt  button gt    All this button should do is some JavaScript  But even when it looks just like in the code above  it submits the form  When I change the tag button to span  it works perfectly  But unfortunately  it needs to be a button  Is there any way to block that button from submitting the form  Like e  g    lt button onclick  document getElementById  myform   doNotSubmit     gt My Button lt  button gt

User · Answer

It s recommended not to use the  lt Button gt  tag  Use the  lt Input type  Button  onclick  return false   gt  tag instead   Using the  return false  should indeed not send the form    Some reference material

User · Answer

I think this is the most annoying little peculiarity of HTML    That button needs to be of type  button  in order to not submit      lt button type  button  gt My Button lt  button gt    Update 5-Feb-2019  As per the HTML Living Standard  and also HTML 5 specification       The missing value default and invalid value default are the Submit   Button state

User · Answer

Dave Markle is correct  From W3School s website      Always specify the type attribute for   the button  The default type for   Internet Explorer is  button   while   in other browsers  and in the W3C   specification  it is  submit     In other words  the browser you re using is following W3C s specification

User · Answer

return false  at the end of the onclick handler will do the job  However  it s be better to simply add type  button  to the  lt button gt  - that way it behaves properly even without any JavaScript

User · Answer

By default  html buttons submit a form      This is due to the fact that even buttons located outside of a form act as submitters  see the W3Schools website  http   www w3schools com tags att button form asp    In other words  the button type is  submit  by default   lt button type  submit  gt Button Text lt  button gt       Therefore an  easy way to get around this is to use the button type     lt button type  button  gt Button Text lt  button gt       Other options include returning false at the end of the onclick or any other handler for when the button is clicked  or to using an  lt  input  tag instead    To find out more  check out the Mozilla Developer Network s information on buttons  https   developer mozilla org en docs Web HTML Element button

User · Answer

For accessibility reason  I could not pull it off with multiple type submit buttons  The only way to work natively with a form with multiple buttons but ONLY one can submit the form when hitting the Enter key is to ensure that only one of them is of type submit while others are in other type such as type button  By this way  you can benefit from the better user experience in dealing with a form on a browser in terms of keyboard support

User · Answer

Another option that worked for me was to add onsubmit  return false   to the form tag     lt form onsubmit  return false   gt    Semantically probably not as good a solution as the above methods of changing the button type  but seems to be an option if you just want a form element the won t submit

[javascript] HTML button to NOT submit form

Examples related to javascript

Examples related to html