web-dev-qa-db-fra.com

Prévenir les valeurs par défaut sur le formulaire de soumission jQuery

Quel est le problème avec cela?

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

Essaye ça:

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

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

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

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

53
scarver2

Je crois que toutes les réponses ci-dessus sont correctes, mais cela ne montre pas pourquoi la méthode submit ne fonctionne pas.

Eh bien, la méthode submit ne fonctionnera pas si jQuery ne peut pas obtenir l’élément form, et jQuery ne génère aucune erreur à ce sujet. Si votre script est placé dans l'en-tête du document, assurez-vous que le code est exécuté après que DOM soit prêt. Donc, $(document).ready(function () { // your code here // }); va résoudre le problème.

La meilleure pratique est, mettez toujours votre script au bas du document.

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

C'est une question ancienne, mais la réponse acceptée ici ne va pas vraiment au fond du problème.

Vous pouvez résoudre ce problème de deux manières. D'abord avec jQuery:

$(document).ready( function() { // Wait until document is fully parsed
  $("#cpa-form").on('submit', function(e){

     e.preventDefault();

  });
}

Ou sans 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();

});

Vous n'avez pas besoin d'utiliser return false pour résoudre ce problème.

5
Chuck Le Butt
$(document).ready(function(){
    $("#form_id").submit(function(){
        return condition;
    });
});
3
shraddha Dharmamer

Votre code est correct, il vous suffit de le placer dans la fonction Prêt.

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

OBSOLÈTE - cette partie est obsolète, donc ne l'utilisez pas.

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

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

UPDATE - vous devez utiliser la méthode jQuery on () pour essayer d’écouter le document DOM si vous souhaitez gérer le contenu ajouté de manière dynamique.

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

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

OR

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

Cas 2, version dynamique: Si vous écoutez déjà le document dans votre code, cette façon serait bonne pour vous. Cela fonctionnera également pour le code ajouté ultérieurement via DOM ou dynamique avec 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           
    })
});
1
NFlows

Bonjour a cherché une solution pour faire fonctionner un formulaire Ajax avec Google Tag Manager (GTM), le retour false empêchait l'achèvement et soumettait l'activation de l'événement en temps réel sur la solution google analytics afin de changer le retour false par e.preventDefault () ; qui a fonctionné correctement suit le code:

 $("#Contact-Form").submit(function(e) {
    e.preventDefault();
   ...
});
0
Navi