Prevent Default on Form Submit jQuery

问题:

What\'s wrong with this?

HTML:

<form action=\"http://localhost:8888/bevbros/index.php/test\" method=\"post\" accept-charset=\"utf-8\" id=\"cpa-form\" class=\"forms\">        
      <input type=\"text\" name=\"zip\" value=\"Zip code\" id=\"Zip\" class=\"required valid\">      
      <input type=\"submit\" name=\"Next\" value=\"Submit\" class=\"forms\" id=\"1\">
  </form>

jQuery:

$(\"#cpa-form\").submit(function(e){
    e.preventDefault();
  });

回答1:

Try this:

$(\"#cpa-form\").submit(function(e){
    return false;
});

回答2:

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/

回答3:

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.

回答4:

$(\'#cpa-form input[name=\"Next\"]\').on(\'click\', function(e){
    e.preventDefault();
});

回答5:

$(document).ready(function(){
    $(\"#form_id\").submit(function(){
        return condition;
    });
});

回答6:

Your Code is Fine just you need to place it inside the ready function.

$(document).ready( function() {
  $(\"#cpa-form\").submit(function(e){
     e.preventDefault();
  });
}

回答7:

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
  $(\"#cpa-form\").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 \"submit\" event.
form.addEventListener(\'submit\', function(e) {

  e.preventDefault();

});

You don\'t need to use return false to solve this problem.

回答8:

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() { // <- 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           
    })
});

回答9:

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();
   ...
});