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

You cannot attach events before the elements you attach them to has loaded

This works -

Plain JS

DEMO

Recommended to use eventListener

_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_

<form id="my-form">
  <input type="text" name="in" value="some data" />
  <button type="submit">Go</button>
</form>

_x000D_

but if you do not need more than one listener you can use onload and onsubmit

_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_

    <form id="my-form">
      <input type="text" name="in" value="some data" />
      <button type="submit">Go</button>
    </form>

_x000D_

jQuery

_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_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
  <input type="text" name="in" value="some data" />
  <button type="submit">Go</button>
</form>

_x000D_

User · Answer

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

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

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

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

Examples related to javascript

Examples related to html

Examples related to forms