How do I cancel form submission in submit button onclick event

Question

I m working on an ASP net web application   I have a form with a submit button   The code for the submit button looks like  lt input type  submit  value  submit request  onclick  btnClick     gt    I want to write something like the following   function btnClick         if   validData            cancelFormSubmission        How do I do this

User · Answer

You need onSubmit  Not onClick otherwise someone can just press enter and it will bypass your validation  As for canceling  you need to return false  Here s the code    lt form onSubmit  return btnClick    gt   lt input type  submit  value  submit request  gt   function btnClick         if   validData    return false      Edit onSubmit belongs in the form tag

User · Answer

Change your input to this    lt input type  submit  value  submit request  onclick  return btnClick     gt    And return false in your function  function btnClick         if   validData            return false

User · Answer

Why not change the submit button to a regular button  and on the click event  submit your form if it passes your validation tests   e g   lt input type  button  value  submit request  onclick  btnClick     gt   function btnClick          if  validData             document myform submit

User · Answer

function btnClick         return validData

User · Answer

This is a very old thread but it is sure to be noticed  Hence the note that the solutions offered are no longer up to date and that modern Javascript is much better   lt script gt  document getElementById id of the form  addEventListener       quot submit quot       function event                if validData       false                        event preventDefault                         false      The form receives an event handler that monitors the submit  If the there called function validData  not shown here  returns a FALSE  calling the method PreventDefault  which suppresses the submit of the form and the browser returns to the input  Otherwise the form will be sent as usual  P S  This also works with the attribute onsubmit  Then the anonymus function function event       must in the attribute onsubmit of the form  This is not really modern and you can only work with one event handler for submit  But you don t have to create an extra javascript  In addition  it can be specified directly in the source code as an attribute of the form and there is no need to wait until the form is integrated in the DOM

User · Answer

you should change the type from submit to button    lt input type  button  value  submit request  gt    instead of   lt input type  submit  value  submit request  gt    you then get the name of your button in javascript and associate whatever action you want to it  var btn   document forms  frm name   elements  btn name    btn onclick   function           worked for me hope it helps

User · Answer

You need to return false     lt input type  submit  value  submit request  onclick  return btnClick       gt   function btnClick         return validData

User · Answer

Sometimes onsubmit wouldn t work with asp net   I solved it with very easy way   if we have such a form   lt form method  post  name  setting-form   gt      lt input type  text  id  UserName  name  UserName  value           placeholder  user name   gt      lt input type  password  id  Password  name  password  value    placeholder  password   gt      lt div id  remember  class  checkbox  gt       lt label gt remember me lt  label gt       lt asp CheckBox ID  RememberMe  runat  server    gt      lt  div gt      lt input type  submit  value  login  id  login-btn   gt   lt  form gt    You can now catch get that event before the form postback and stop it from  postback and do all the ajax you want using this jquery     document  ready function                      login-btn   click function  event                    event preventDefault                    alert  do what ever you want

User · Answer

use onclick  return btnClick      and  function btnClick         return validData

User · Answer

You need to change  onclick  btnClick       to  onclick  return btnClick       and  cancelFormSubmission      to  return false    That said  I d try to avoid the intrinsic event attributes in favour of unobtrusive JS with a library  such as YUI or jQuery  that has a good event handling API and tie into the event that really matters  i e  the form s submit event instead of the button s click event

User · Answer

With JQuery is even more simple  works in Asp Net MVC and Asp Core     lt script gt          btnSubmit   on  click   function               if  ValidData                return true      submit the form                   else               return false     cancel the submit                    lt  script gt

User · Answer

lt input type  button  onclick  buttonClick      gt    lt script gt  function buttonClick          Validate Here     document getElementsByTagName  form   0  submit       lt  script gt

User · Answer

You are better off doing      lt form onsubmit  return isValidForm      gt    If isValidForm   returns false  then your form doesn t submit   You should also probably move your event handler from inline   document getElementById  my-form   onsubmit   function         return isValidForm

User · Answer

It s simple  just return false   The below code goes within the onclick of the submit button using jquery    if conditionsNotmet    return false

[javascript] How do I cancel form submission in submit button onclick event?

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to html-input