How to prevent form from being submitted

Question

I have a form that has a submit button in it somewhere   However  I would like to somehow  catch  the submit event and prevent it from occurring   Is there some way I can do this   I can t modify the submit button  because it s part of a custom control

User · Answer

Attach an event listener to the form using .addEventListener() and then call the .preventDefault() method on event:

_x000D_

const element = document.querySelector('form');_x000D_
element.addEventListener('submit', event => {_x000D_
  event.preventDefault();_x000D_
  // actual logic, e.g. validate the form_x000D_
  console.log('Form submission cancelled.');_x000D_
});

_x000D_

<form>_x000D_
  <button type="submit">Submit</button>_x000D_
</form>

_x000D_

I think it's a better solution than defining a submit event handler inline with the onsubmit attribute because it separates webpage logic and structure. It's much easier to maintain a project where logic is separated from HTML. See: Unobtrusive JavaScript.

Using the .onsubmit property of the form DOM object is not a good idea because it prevents you from attaching multiple submit callbacks to one element. See addEventListener vs onclick .

User · Answer

Unlike the other answers  return false is only part of the answer  Consider the scenario in which a JS error occurs prior to the return statement     html   lt form onsubmit  return mySubmitFunction event   gt         lt  form gt    script  function mySubmitFunction       someBug     return false      returning false here won t be executed and the form will be submitted either way  You should also call preventDefault to prevent the default form action for Ajax form submissions   function mySubmitFunction e      e preventDefault      someBug      return false      In this case  even with the bug the form won t submit   Alternatively  a try   catch block could be used   function mySubmit e       e preventDefault       try      someBug        catch  e       throw new Error e message         return false

User · Answer

To follow unobtrusive JavaScript programming conventions  and depending on how quickly the DOM will load  it may be a good idea to use the following    lt form onsubmit  return false   gt  lt  form gt    Then wire up events using the onload or DOM ready if you re using a library    x000D   x000D    function     x000D      var  form       my-form    x000D       form removeAttr  onsubmit    x000D       form submit function ev    x000D             quick validation example    x000D           form children  input type  text     each function    x000D              if   this  val   length    0    x000D                  alert  You are missing a field    x000D                  ev preventDefault    x000D                x000D              x000D          x000D      x000D  label   x000D      display  block  x000D    x000D   x000D   my-form  gt  input type  text     x000D      background  cyan  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt form id  my-form  action  http   google com  method  GET  onsubmit  return false   gt  x000D       lt label gt Your first name lt  label gt  x000D       lt input type  text  name  first-name   gt  x000D       lt label gt Your last name lt  label gt  x000D       lt input type  text  name  last-name    gt   lt br   gt  x000D       lt input type  submit    gt  x000D   lt  form gt  x000D   x000D   x000D    Also  I would always use the action attribute as some people may have some plugin like NoScript running which would then break the validation  If you re using the action attribute  at the very least your user will get redirected by the server based on the backend validation  If you re using something like window location  on the other hand  things will be bad

User · Answer

Here my answer     lt form onsubmit  event preventDefault   searchOrder event    gt       lt  form gt   lt script gt  const searchOrder   e   gt        e preventDefault        const name   e target name value      renderSearching         return false     lt  script gt    I add event preventDefault    on onsubmit and it works

User · Answer

You can use inline event onsubmit like this   lt form onsubmit  alert  stop submit    return false    gt    Or   lt script gt     function toSubmit          alert  I will not submit          return false        lt  script gt    lt form onsubmit  return toSubmit      gt    Demo  Now  this may be not a good idea when making big projects  You may need to use Event Listeners   Please read more about Inline Events vs Event Listeners  addEventListener and IE s attachEvent  here  For I can not explain it more than Chris Baker did       Both are correct  but none of them are  best  per se  and there may be   a reason the developer chose to use both approaches

User · Answer

Try this one     HTML Code   lt form class  submit  gt       lt input type  text  name  text1   gt       lt input type  text  name  text2   gt       lt input type  submit  name  Submit  value  submit   gt   lt  form gt    jQuery Code    function            submit   on  submit   function event           event preventDefault            alert  Form Submission stopped                   or    function            submit   on  submit   function event          event preventDefault           event stopPropagation           alert  Form Submission prevented   stopped

User · Answer

For prevent form from submittion you only need to do this    lt form onsubmit  event preventDefault    gt             lt  form gt    By using above code this will prevent your form submittion

User · Answer

var form   document getElementById  idOfForm    form onsubmit   function       return false

User · Answer

You can add eventListner to the form  that preventDefault   and convert form data to JSON as below    x000D   x000D  const formToJSON   elements   gt     reduce call elements   data  element    gt    x000D    data element name    element value  x000D    return data  x000D   x000D          x000D   x000D  const handleFormSubmit   event   gt    x000D      event preventDefault    x000D      const data   formToJSON form elements   x000D      console log data   x000D        const odata   JSON stringify data  null         x000D    const jdata   JSON stringify data   x000D      console log jdata   x000D   x000D       async      gt    x000D        const rawResponse   await fetch        x000D          method   POST   x000D          headers    x000D             Accept    application json   x000D             Content-Type    application json  x000D             x000D          body  jdata x000D            x000D        const content   await rawResponse json    x000D   x000D        console log content   x000D            x000D     x000D   x000D  const form   document forms  myForm     x000D  form addEventListener  submit   handleFormSubmit   x000D   lt form id  myForm  action     method  post  accept-charset  utf-8  gt  x000D       lt label gt Checkbox  x000D           lt input type  checkbox  name  checkbox  value  on  gt  x000D       lt  label gt  lt br   gt  lt br   gt  x000D   x000D       lt label gt Number  x000D           lt input name  number  type  number  value  123    gt  x000D       lt  label gt  lt br   gt  lt br   gt  x000D   x000D       lt label gt Password  x000D           lt input name  password  type  password    gt  x000D       lt  label gt  x000D       lt br   gt  lt br   gt  x000D   x000D       lt label for  radio  gt Type  x000D           lt label for  a  gt A x000D               lt input type  radio  name  radio  id  a  value  a    gt  x000D           lt  label gt  x000D           lt label for  b  gt B x000D               lt input type  radio  name  radio  id  b  value  b  checked   gt  x000D           lt  label gt  x000D           lt label for  c  gt C x000D               lt input type  radio  name  radio  id  c  value  c    gt  x000D           lt  label gt  x000D       lt  label gt  x000D       lt br   gt  lt br   gt  x000D   x000D       lt label gt Textarea  x000D           lt textarea name  text area  rows  10  cols  50  gt Write something here  lt  textarea gt  x000D       lt  label gt  x000D       lt br   gt  lt br   gt  x000D   x000D       lt label gt Select  x000D           lt select name  select  gt  x000D               lt option value  a  gt Value A lt  option gt  x000D               lt option value  b  selected gt Value B lt  option gt  x000D               lt option value  c  gt Value C lt  option gt  x000D           lt  select gt  x000D       lt  label gt  x000D       lt br   gt  lt br   gt  x000D   x000D       lt label gt Submit  x000D           lt input type  submit  value  Login  gt  x000D       lt  label gt  x000D       lt br   gt  lt br   gt  x000D   x000D   x000D   lt  form gt  x000D   x000D   x000D

User · Answer

The following works as of now  tested in chrome and firefox     lt form onsubmit  event preventDefault    return validateMyForm     gt    where validateMyForm   is a function that returns false if validation fails  The key point is to use the name event  We cannot use for e g  e preventDefault

[javascript] How to prevent form from being submitted?

Examples related to javascript

Examples related to html

Examples related to forms