Capturing a form submit with jquery and submit

Question

I m attempting to use jQuery to capture a submit event and then send the form elements formatted as JSON to a PHP page  I m having issues capturing the submit though  I started with a  click   event but moved to the  submit   one instead   I now have the following trimmed down code   HTML   lt form method  POST  id  login form  gt       lt label gt Username  lt  label gt       lt input type  text  name  username  id  username   gt       lt label gt Password  lt  label gt       lt input type  password  name  password  id  password   gt       lt input type  submit  value  Submit  name  submit  class  submit  id  submit    gt   lt  form gt    Javascript      login form   submit function         var data       login form  input   serializeArray        alert  Handler for  submit   called

User · Answer

try this   Use   return false   for to cut the flow of the event       login form   submit function         var data       login form  input   serializeArray        alert  Handler for  submit   called         return false       lt - cancel event       Edit  corroborate if the form element with the  length  of jQuery   alert     login form   length     if is    0  not found form     login form   submit function         var data       login form  input   serializeArray        alert  Handler for  submit   called         return false       lt - cancel event       OR   it waits for the DOM is ready   jQuery function          alert     login form   length     if is    0  not found form         login form   submit function             var data       login form  input   serializeArray            alert  Handler for  submit   called             return false       lt - cancel event                Do you put your code inside the event  ready  the document or after the DOM is ready

User · Answer

Wrap the code in document ready and prevent the default submit action     function       shorthand document ready function         login form   on  submit   function e      use on if jQuery 1 7          e preventDefault       prevent form from submitting         var data       login form  input   serializeArray            console log data     use the console for debugging  F12 in Chrome  not alerts

User · Answer

x000D   x000D    document  ready function      x000D    var form       login form   0   x000D    form onsubmit   function e   x000D    var data       login form  input   serializeArray    x000D    console log data   x000D      ajax   x000D    url   the url to post   x000D    data  data  x000D    processData  false  x000D    contentType  false  x000D    type   POST   x000D    success  function data   x000D      alert data   x000D       x000D    error  function xhrRequest  status  error    x000D      alert JSON stringify xhrRequest    x000D      x000D      x000D      return false  x000D      x000D      x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt title gt Capturing sumit action lt  title gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt form method  POST  id  login form  gt  x000D       lt label gt Username  lt  label gt  x000D       lt input type  text  name  username  id  username   gt  x000D       lt label gt Password  lt  label gt  x000D       lt input type  password  name  password  id  password   gt  x000D       lt input type  submit  value  Submit  name  submit  class  submit  id  submit    gt  x000D   lt  form gt  x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Just replace the form submit function with your own implementation   var form   document getElementById  form    var formSubmit   form submit    save reference to original submit function  form onsubmit   function e        formHandler        return false      var formHandler   form submit   function         alert  hi there        formSubmit      optionally submit the form

User · Answer

Just a tip  Remember to put the code detection on document ready  otherwise it might not work  That was my case

[javascript] Capturing a form submit with jquery and .submit

Examples related to javascript

Examples related to html

Examples related to jquery