Empêcher le défaut sur la soumission du formulaire jQuery

Question

Qu'est-ce qui ne va pas avec ça ?

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

Answer 1

Essayez ça :

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

Answer 2

Utilisez la nouvelle syntaxe d'événement "on".

$(document).ready(function() {
  $('form').on('submit', function(e){
    // validation code here
    if(!valid) {
      e.preventDefault();
    }
  });
});

Citer : https://api.jquery.com/on/

Answer 3

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

Answer 4

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

Answer 5

DÉCRYPTÉ - cette partie est périmée, veuillez ne pas l'utiliser.

Vous pouvez également essayer ce code, si vous avez par exemple ajouté ultérieurement des formulaires dynamiques. Par exemple, vous avez chargé une fenêtre async avec ajax et vous voulez soumettre ce formulaire.

$('#cpa-form').live('submit' ,function(e){
    e.preventDefault();      
    // do something
});

UPDATE - vous devez utiliser la méthode jQuery on() et essayer d'écouter le DOM du document si vous voulez gérer du contenu ajouté dynamiquement.

Cas 1, version statique : Si vous n'avez que quelques listeners et que votre formulaire à gérer est codé en dur, alors vous pouvez écouter directement au "niveau du document". Je n'utiliserais pas les listeners au niveau du document, mais j'essaierais d'aller plus loin dans l'arbre de doom, car cela pourrait entraîner des problèmes de performance (cela dépend de la taille de votre site web et de votre contenu).

$('form#formToHandle').on('submit'... 

OU

$('form#formToHandle').submit(function(e) {
    e.preventDefault();      
    // do something
});

Cas 2, version dynamique : Si vous écoutez déjà le document dans votre code, alors cette méthode vous conviendra. Cela fonctionnera également pour le code qui a été ajouté plus tard via DOM ou dynamique avec AJAX.

$(document).on('submit','form#formToHandle',function(){
   // do something like e.preventDefault(); 
});

OU

$(document).ready(function() {
    console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

OU

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