Prevent Default on Form Submit jQuery

Question

What s wrong with this   HTML    lt form action  http   localhost 8888 bevbros index php test  method  post  accept-charset  utf-8  id  cpa-form  class  forms  gt                 lt input type  text  name  zip  value  Zip code  id  Zip  class  required valid  gt               lt input type  submit  name  Next  value  Submit  class  forms  id  1  gt     lt  form gt    jQuery       cpa-form   submit function e       e preventDefault

User · Answer

document  ready function            form id   submit function            return condition

User · Answer

This is an ancient question  but the accepted answer here doesn t really get to the root of the problem  You can solve this two ways  First with jQuery    document  ready  function        Wait until document is fully parsed      quot  cpa-form quot   on  submit   function e         e preventDefault               Or without jQuery     Gets a reference to the form element var form   document getElementById  cpa-form        Adds a listener for the  quot submit quot  event  form addEventListener  submit   function e       e preventDefault          You don t need to use return false to solve this problem

User · Answer

I believe that the above answers is all correct  but that doesn t point out why the submit method doesn t work   Well  the submit method will not work if jQuery can t get the form element  and jQuery doesn t give any error about that  If your script is placed in the head of the document  make sure the code runs after DOM is ready  So    document  ready function         your code here        will solve the problem   The best practice is  always put your script in the bottom of the document

User · Answer

Well I encountered a similar problem  The problem for me is that the JS file get loaded before the DOM render happens  So move your  lt script gt  to the end of  lt body gt  tag   or use defer    lt script defer src    gt    so rest assured e preventDefault   should work

User · Answer

DEPRECATED - this part is outdated so please don t use it    You can also try this code  if you have for example later added dynamic forms  For example you loaded a window async with ajax and want to submit this form       cpa-form   live  submit   function e       e preventDefault                 do something          UPDATE - you should use the jQuery on   method an try to listen to the document DOM if you want to handle dynamically added content    Case 1  static version   If you have only a few listeners and your form to handle is hardcoded  then you can listen directly on  document level   I wouldn t use the listeners on document level but I would try to go deeper in the doom tree because it could lead to performance issues  depends on the size of your website and your content      form formToHandle   on  submit        OR     form formToHandle   submit function e        e preventDefault                 do something          Case 2  dynamic version  If you already listen to the document in your code  then this way would be good for you  This will also work for code that was added later via DOM or dynamic with AJAX      document  on  submit   form formToHandle  function          do something like e preventDefault           OR    document  ready function         console log   Ready  Document loaded              all your other code listening to the document to load           formToHandle   on  submit   function               do something                         OR     function         lt - this is shorthand version    console log   Ready  Document loaded              all your other code listening to the document to load           formToHandle   on  submit   function               do something

User · Answer

Hello sought a solution to make an Ajax form work with Google Tag Manager  GTM   the return false prevented the completion and submit the activation of the event in real time on google analytics solution was to change the return false by e preventDefault     that worked correctly follows the code        Contact-Form   submit function e        e preventDefault

User · Answer

e preventDefault   works fine only if you dont have problem on your javascripts  check your javascripts if e preventDefault   doesn t work chances are some other parts of your JS doesn t work also

User · Answer

cpa-form input name  Next     on  click   function e       e preventDefault

User · Answer

Use the new  on  event syntax     document  ready function          form   on  submit   function e          validation code here     if  valid          e preventDefault                      Cite  https   api jquery com on

User · Answer

Try this        cpa-form   submit function e       return false

User · Answer

Your Code is Fine just you need to place it inside the ready function     document  ready  function           cpa-form   submit function e        e preventDefault

[jquery] Prevent Default on Form Submit jQuery

Examples related to jquery

Examples related to preventdefault