Intercept a form submit in JavaScript and prevent normal submission

Question

There seems to be lots of info on how to submit a form using javascript  but I am looking for a solution to capture when a form has been submitted and intercept it in javascript   HTML   lt form gt    lt input type  text  name  in  value  some data    gt    lt button type  submit  gt Go lt  button gt   lt  form gt    When a user presses the submit button  I do not want the form to be submitted  but instead I would like a JavaScript function to be called   function captureForm         do some stuff with the values in the form     stop form from being submitted     A quick hack would be to add an onclick function to the button but I do not like this solution    there are many ways to submit a form    e g  pressing return while on an input  which this does not account for   Ty

User · Answer

Use  Kristian Antonsen s answer  or you can use      button   click function         preventDefault        captureForm

User · Answer

lt form id  my-form  gt       lt input type  text  name  in  value  some data    gt       lt button type  submit  gt Go lt  button gt   lt  form gt    In JS   function processForm e        if  e preventDefault  e preventDefault            do what you want with the form            You must return false to prevent the default form behavior     return false     var form   document getElementById  my-form    if  form attachEvent        form attachEvent  submit   processForm     else       form addEventListener  submit   processForm       Edit  in my opinion  this approach is better than setting the onSubmit attribute on the form since it maintains separation of mark-up and functionality  But that s just my two cents   Edit2  Updated my example to include preventDefault

User · Answer

You cannot attach events before the elements you attach them to has loaded This works - Plain JS DEMO Recommended to use eventListener  x000D   x000D     Should only be triggered on first page load console log  ho     window addEventListener  load   function       document getElementById  my-form   addEventListener  submit   function e        e preventDefault       before the code        do what you want with the form            Should be triggered on form submit     console log  hi             x000D   lt form id  my-form  gt     lt input type  text  name  in  value  some data    gt     lt button type  submit  gt Go lt  button gt   lt  form gt  x000D   x000D   x000D   but if you do not need more than one listener you can use onload and onsubmit  x000D   x000D     Should only be triggered on first page load console log  ho     window onload   function       document getElementById  my-form   onsubmit   function            do what you want with the form            Should be triggered on form submit     console log  hi           You must return false to prevent the default form behavior     return false        x000D       lt form id  my-form  gt         lt input type  text  name  in  value  some data    gt         lt button type  submit  gt Go lt  button gt       lt  form gt  x000D   x000D   x000D   jQuery  x000D   x000D     Should only be triggered on first page load console log  ho       function           my-form   on  submit   function e        e preventDefault       cancel the actual submit         do what you want with the form            Should be triggered on form submit      console log  hi              x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt form id  my-form  gt     lt input type  text  name  in  value  some data    gt     lt button type  submit  gt Go lt  button gt   lt  form gt  x000D   x000D   x000D

User · Answer

lt form onSubmit  return captureForm    gt  that should do  Make sure that your captureForm   method returns false

User · Answer

Another option to handle all requests I used in my practice for cases when onload can t help is to handle javascript submit  html submit  ajax requests  These code should be added in the top of body element to create listener before any form rendered and submitted   In example I set hidden field to any form on page on its submission even if it happens before page load     Handles jquery  dojo  etc  ajax requests  function  send        var token      meta name   csrf     attr  content        var header      meta name   csrf header     attr  content        XMLHttpRequest prototype send   function  data            if  isNotEmptyString token   amp  amp  isNotEmptyString header                 this setRequestHeader header  token                     send call this  data             XMLHttpRequest prototype send       Handles javascript submit  function  submit        HTMLFormElement prototype submit   function  data            var token      meta name   csrf     attr  content            var paramName      meta name   csrf parameterName     attr  content                lt input gt    attr               type   hidden               name  paramName              value  token            appendTo this            submit call this  data             HTMLFormElement prototype submit       Handles html submit document body addEventListener  submit   function  event        var token      meta name   csrf     attr  content        var paramName      meta name   csrf parameterName     attr  content            lt input gt    attr           type   hidden           name  paramName          value  token        appendTo event target      false

[javascript] Intercept a form submit in JavaScript and prevent normal submission

Examples related to javascript

Examples related to html

Examples related to forms