Empêcher le défaut sur le formulaire Soumettre jQuery

Quel est le problème 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();
  });

Essaye ça:

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

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/

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

Eh bien, la submitméthode ne fonctionnera pas si jQuery ne peut pas obtenir l' formélément, et jQuery ne donne aucune erreur à ce sujet. Si votre script est placé dans l'en-tête du document, assurez-vous que le code s'exécute après DOMest prêt . Alors, $(document).ready(function () { // your code here // });résoudra le problème.

La meilleure pratique est de toujours mettre votre script au bas du document.

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

Vous pouvez résoudre cela de deux manières. Tout 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 falsepour résoudre ce problème.

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

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

Votre code est parfait, il vous suffit de le placer dans la fonction prête.

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

DEPRECATED - cette partie est obsolète, veuillez donc ne pas l'utiliser.

Vous pouvez également essayer ce code, si vous avez par exemple ajouté des formulaires dynamiques ultérieurement. Par exemple, vous avez chargé une fenêtre asynchrone 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 () et essayer d'écouter le DOM du document si vous souhaitez gérer le contenu ajouté dynamiquement.

Cas 1, version statique: Si vous n'avez que quelques écouteurs et que votre formulaire à gérer est codé en dur, alors vous pouvez écouter directement au «niveau document». Je n'utiliserais pas les écouteurs au niveau du document mais j'essaierais d'aller plus loin dans l'arbre du destin 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'... 

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 serait bonne pour vous. 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           
    })
});

Bonjour cherchait 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 était de modifier le retour false par e.preventDefault () ; qui a fonctionné correctement suit le code:

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

e.preventDefault () ne fonctionne bien que si vous n'avez pas de problème sur vos javascripts, vérifiez vos javascripts si e.preventDefault () ne fonctionne pas, il y a des chances que d'autres parties de votre JS ne fonctionnent pas aussi

Eh bien, j'ai rencontré un problème similaire. Le problème pour moi est que le fichier JS est chargé avant le rendu DOM. Alors déplacez-vous <script>à la fin de<body> balise.

ou utilisez différer.

<script defer src="">

alors soyez assuré que cela e.preventDefault()devrait fonctionner.