How to prevent buttons from submitting forms

Question

In the following page  with Firefox the remove button submits the form  but the add button does not  How do I prevent the remove button from submitting the form   x000D   x000D  function addItem       var v      form  hidden last   attr  name      var n        input  exec v      var newPrefix    if  n 1  length    0        newPrefix    1       else       newPrefix   parseInt n 1     1         var oldElem      form tr last      var newElem   oldElem clone true     var lastHidden      form  hidden last       lastHidden val newPrefix      var pat           n 1     input      newElem html newElem html   replace new RegExp pat   g            newPrefix    input       newElem appendTo  table         form  hidden last   val         function removeItem       var rows      form tr      if  rows length  gt  2        rows rows length - 1  html             form  hidden last   val          else       alert  Cannot remove any more rows          x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 3 2 jquery min js  gt  lt  script gt   lt html gt   lt body gt       lt form autocomplete  off  method  post  action    gt           lt p gt Title  lt input type  text    gt  lt  p gt           lt button onclick  addItem    return false   gt Add Item lt  button gt           lt button onclick  removeItem    return false   gt Remove Last Item lt  button gt           lt table gt               lt th gt Name lt  th gt                lt tr gt                   lt td gt  lt input type  text  id  input1  name  input1    gt  lt  td gt                   lt td gt  lt input type  hidden  id  input2  name  input2    gt  lt  td gt               lt  tr gt           lt  table gt           lt input id  submit  type  submit  name  submit  value  Submit  gt       lt  form gt   lt  body gt    lt  html gt  x000D   x000D   x000D

User · Answer

The function removeItem actually contains an error, which makes the form button do it's default behaviour (submitting the form). The javascript error console will usually give a pointer in this case.

Check out the function removeItem in the javascript part:

The line:

rows[rows.length-1].html('');

doesn't work. Try this instead:

rows.eq(rows.length-1).html('');

User · Answer

return false    You can return false at the end of the function or after the function call    Just as long as it s the last thing that happens  the form will not submit

User · Answer

I agree with Shog9  though I might instead use    lt input type    button  onClick  addItem    return false   value  Add Item    gt    According to w3schools  the  lt button gt  tag has different behavior on different browsers

User · Answer

Here s a simple approach       mybutton   click function            Perform some button action            alert  I don t like it when you press my button             Then  the most important part            return false

User · Answer

Set the type on your buttons    lt button type  button  onclick  addItem    return false   gt Add Item lt  button gt   lt button type  button  onclick  removeItem    return false   gt Remove Last Item lt  button gt       that ll keep them from triggering a submit action when an exception occurs in the event handler  Then  fix your removeItem   function so that it doesn t trigger an exception   function removeItem       var rows      form tr      if   rows length  gt  2            change  work on filtered jQuery object     rows filter   last   html             form  hidden last   val          else       alert  Cannot remove any more rows            Note the change  your original code extracted a HTML element from the jQuery set  and then tried to call a jQuery method on it - this threw an exception  resulting in the default behavior for the button   FWIW  there s another way you could go with this    Wire up your event handlers using jQuery  and use the preventDefault   method on jQuery s event object to cancel the default behavior up-front     function      execute once the DOM has loaded         wire up Add Item button click event       AddItem   click function event          event preventDefault       cancel default behavior            rest of add logic             wire up Remove Last Item button click event      RemoveLastItem   click function event          event preventDefault       cancel default behavior            rest of remove last logic                   lt button type  button  id  AddItem  name  AddItem  gt Add Item lt  button gt   lt button type  button  id  RemoveLastItem  name  RemoveLastItem  gt Remove Last Item lt  button gt    This technique keeps all of your logic in one place  making it easier to debug    it also allows you to implement a fall-back by changing the type on the buttons back to submit and handling the event server-side - this is known as unobtrusive JavaScript

User · Answer

Sometime ago I needed something very similar    and I got it   So what I put here is how I do the tricks to have a form able to be submitted by JavaScript without any validating and execute validation only when the user presses a button  typically a send button    For the example I will use a minimal form  only with two fields and a submit button   Remember what is wanted  From JavaScript it must be able to be submitted without any checking  However  if the user presses such a button  the validation must be done and form sent only if pass the validation   Normally all would start from something near this  I removed all extra stuff not important     lt form method  post  id  theFormID  name  theFormID  action    gt      lt input type  text  id  Field1  name  Field1    gt      lt input type  text  id  Field2  name  Field2    gt      lt input type  submit  value  Send  onclick  JavaScript return Validator       gt   lt  form gt    See how form tag has no onsubmit        remember it was a condition not to have it    The problem is that the form is always submitted  no matter if onclick returns true or false   If I change type  submit  for type  button   it seems to work but does not  It never sends the form  but that can be done easily   So finally I used this    lt form method  post  id  theFormID  name  theFormID  action    gt      lt input type  text  id  Field1  name  Field1    gt      lt input type  text  id  Field2  name  Field2    gt      lt input type  button  value  Send  onclick  JavaScript return Validator       gt   lt  form gt    And on function Validator  where return True  is  I also add a JavaScript submit sentence  something similar to this   function Validator              bla bla bla    the checks    if                                        document getElementById  theFormID   submit          return true       else        return false            The id    is just for JavaScript getElementById  the name    is just for it to appear on POST data   On such way it works as I need   I put this just for people that need no onsubmit function on the form  but make some validation when a button is press by user   Why I need no onsubmit on form tag  Easy  on other JavaScript parts I need to perform a submit but I do not want there to be any validation   The reason  If user is the one that performs the submit I want and need the validation to be done  but if it is JavaScript sometimes I need to perform the submit while such validations would avoid it   It may sounds strange  but not when thinking for example  on a Login     with some restrictions    like not allow to be used PHP sessions and neither cookies are allowed   So any link must be converted to such form submit  so the login data is not lost  When no login is yet done  it must also work  So no validation must be performed on links  But I want to present a message to the user if the user has not entered both fields  user and pass  So if one is missing  the form must not be sent  there is the problem   See the problem  the form must not be sent when one field is empty only if the user has pressed a button  if it is a JavaScript code it must be able to be sent   If I do the work on onsubmit on the form tag  I would need to know if it is the user or other JavaScript  Since no parameters can be passed  it is not possible directly  so some people add a variable to tell if validation must be done or not  First thing on validation function is to check that variable value  etc    Too complicated and code does not say what is really wanted   So the solution is not to have onsubmit on the form tag  Insead put it where it really is needed  on the button   For the other side  why put onsubmit code since conceptually I do not want onsubmit validation  I really want button validation   Not only the code is more clear  it is where it must be  Just remember this  - I do not want JavaScript to validate the form  that must be always done by PHP on the server side  - I want to show to the user a message telling all fields must not be empty  that needs JavaScript  client side   So why some people  think or tell me  it must be done on an onsumbit validation  No  conceptually I am not doing a onsumbit validating at client side  I am just doing something on a button get pressed  so why not just let that to be implemented   Well that code and style does the trick perfectly   On any JavaScript that I need to send the form I just put   document getElementById  theFormID   action    GoToThisPage php      Where to go document getElementById  theFormID   submit       Send POST data and go there   And that skips validation when I do not need it  It just sends the form and loads a different page  etc   But if the user clicks the submit button  aka type  button  not type  submit   the validation is done before letting the form be submitted and if not valid not sent   Well hope this helps others not to try long and complicated code  Just not use onsubmit if not needed  and use onclick  But just remember to change type  submit  to type  button  and please do not forget to do the submit   by JavaScript

User · Answer

I am sure that on FF the   removeItem    function encounter a JavaScript error  this not happend on IE  When javascript error appear the  return false  code won t run  making the page to postback

User · Answer

Buttons like  lt button gt Click to do something lt  button gt  are submit buttons  You must add type

User · Answer

form   submit function      return false       that will prevent the button from submitting or you can just change the button type to  button   lt input type  button   gt  instead of  lt input type  submit   gt  Which will only work if this button isn t the only button in this form

User · Answer

I m not able to test this right now  but I would think you could use jQuery s preventDefault method

User · Answer

You can simply get the reference of your buttons using jQuery  and prevent its propagation like below      document  ready function              BUTTON ID   click function e                 e preventDefault                e stopPropagation                e stopImmediatePropagation                 return false

User · Answer

The following sample code show you how to prevent button click from submitting form   You may try my sample code     lt form autocomplete  off  method  post  action    gt      lt p gt Title        lt input type  text    gt      lt  p gt      lt input type  button  onclick  addItem    value  Add Item  gt      lt input type  button  onclick  removeItem    value  Remove Last Item  gt      lt table gt        lt th gt Name lt  th gt         lt tr gt          lt td gt            lt input type  text  id  input1  name  input1    gt          lt  td gt          lt td gt            lt input type  hidden  id  input2  name  input2    gt          lt  td gt        lt  tr gt      lt  table gt      lt input id  submit  type  submit  name  submit  value  Submit  gt    lt  form gt   lt script language  javascript  gt  function addItem     return false     function removeItem     return false     lt  script gt

User · Answer

Set your button in normal way and use event preventDefault like           lt button onclick  myFunc e   gt  Remove  lt  button gt                      In function        function myFunc e          e preventDefault

User · Answer

You re using an HTML5 button element  Remember the reason is this button has a default behavior of submit  as stated in the W3 specification as seen here  W3C HTML5 Button So you need to specify its type explicitly   lt button type  quot button quot  gt Button lt  button gt   in order to override the default submit type  I just want to point out the reason why this happens

User · Answer

The return false prevents the default behavior  but the return false breaks the bubbling of additional click events  This means if there are any other click bindings after this function gets called  those others do not Consider     lt button id  btnSubmit  type  button  gt PostData lt  button gt    lt Script gt      btnSubmit   click function          do stuff    return false       lt  Script gt    Or simply you can put like this    lt button type  submit  onclick  return false  gt  PostData lt  button gt

User · Answer

This is an html5 error like has been said  you can still have the button as a submit  if you want to cover both javascript and non javascript users  using it like         lt button type  submit  onclick  return false  gt  Register  lt  button gt    This way you will cancel the submit but still do whatever you are doing in jquery or javascript function s and do the submit for users who dont have javascript

User · Answer

Just add e preventDefault    in your method should prevent your page from submitting forms   function myFunc e          e preventDefault        According to the MDN Web Docs     The preventDefault    method of the Event interface tells the user   agent that if the event is not explicitly processed  its default   action should not be taken into account as it would normally be  The   event continues to propagate as usual  unless one of its listeners   calls stopPropagation    or stopImmediatePropagation     either of   which terminates the propagation

User · Answer

Suppose your HTML form has id  form id    lt form id  form id  gt   lt  --your HTML code-- gt   lt  form gt    Add this jQuery snippet to your code to see result       form id   submit function      return false

[javascript] How to prevent buttons from submitting forms

Examples related to javascript

Examples related to html