Utilisation de JQuery - empêcher l'envoi du formulaire

178

Comment empêcher l'envoi d'un formulaire à l'aide de jquery?

J'ai tout essayé - voir 3 options différentes que j'ai essayées ci-dessous, mais tout ne fonctionnera pas: 

    $(document).ready(function() { 

            //option A
            $("#form").submit(function(e){
                e.preventDefault();
            });

            //option B
            $("#form").submit(function(e){
                stopEvent(e);
            });

            //option C
            $("#form").submit(function(){
                return false;
            });
    });

Qu'est-ce qui ne va pas?

Mise à jour - voici mon html:

    <form id="form" class="form" action="page2.php" method="post"> 
       <!-- tags in the form -->
       <p class="class2">
           <input type="submit" value="Okay!" /> 
       </p>
    </form>

Y a-t-il quelque chose qui ne va pas ici?

jquery forms Lucy Weatherford
la source
Montrez votre HTML car il n'y a rien de mal avec preventDefault ou retournez false lorsque vous l'avez posté, à part que votre sélecteur est totalement faux.
Sparky
1
return false;après le .submit()travaillé pour moi! J'avais le même problème
d -_- b
Si une erreur JavaScript se produit dans le gestionnaire, le e.preventDefault();code n'est pas atteint / exécuté.
Tom

Réponses:

264

Deux choses ressortent:

  • Il est possible que votre nom de formulaire ne le soit pas form. Faites plutôt référence à la balise en supprimant le #.

  • La e.preventDefaultsyntaxe JQuery est également correcte, par exemple

        //option A
    $("form").submit(function(e){
        e.preventDefault();
    });

L'option C devrait également fonctionner. Je ne connais pas l'option B

Un exemple complet:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type='text/javascript'>
         $(document).ready(function() {
            //option A
            $("form").submit(function(e){
                alert('submit intercepted');
                e.preventDefault(e);
            });
        });
        </script>
    </head>

    <body>
        <form action="http://google.com" method="GET">
          Search <input type='text' name='q' />
          <input type='submit'/>
        </form>
    </body>
</html>
Philippe Fourie
la source
2
Quelque chose ne va pas. J'utilise cette technique au quotidien. La meilleure estimation serait qu'il y ait des erreurs JavaScript sur la page, peut-être la vérifier avec FireBug?
Philip Fourie
@LucyWeatherford, j'ai mis à jour ma réponse avec un exemple qui fonctionne. Peut-être que vous apercevez quelque chose.
Philip Fourie
Dans votre mise à jour html, j'ai remarqué que vous avez un attribut de classe pour votre formulaire. Modifiez votre sélecteur JQuery de $('#form')à $('.form')pour les attributs de classe.
Philip Fourie
1
Merci! J'ai fini par utiliser votre code sur la même page, et cela a fonctionné, je ne sais toujours pas ce qui n'allait pas, mais tout va bien maintenant. Merci!
Lucy Weatherford
1
@ ÂngeloRigo e est simplement le nom que vous donnez au paramètre, dans ce cas, c'est l'événement de soumission.
squall3d
34

Vous avez probablement peu de formulaires sur la page et l'utilisation de $ ('form'). Submit () ajoute cet événement à la première occurrence du formulaire sur votre page. Utilisez plutôt le sélecteur de classe ou essayez ceci:

$('form').each(function(){
    $(this).submit(function(e){
        e.preventDefault();
        alert('it is working!');
        return  false;
    })
})

ou une meilleure version de celui-ci:

$(document).on("submit", "form", function(e){
    e.preventDefault();
    alert('it works!');
    return  false;
});
Artem Kiselev
la source
1
Dans mon cas, renvoyer false était une clé.
elquimista
19

Pour empêcher l'utilisation par défaut / empêcher la soumission de formulaire

e.preventDefault();

Pour arrêter le bouillonnement d'événements, utilisez

e.stopPropagation();

Pour éviter la soumission du formulaire, «return false» devrait également fonctionner.

L'Alpha
la source
Consultez cette réponse car jQuery les gère différemment. stackoverflow.com/questions/1357118/…
Sparky
1
Vérifiez ceci pour comprendre l'événement bubling quirksmode.org/js/events_order.html
The Alpha
2
Le jQuery sur l' API déclare: "Renvoyer false à partir d'un gestionnaire d'événements appellera automatiquement event.stopPropagation()et event.preventDefault(). Une falsevaleur peut également être passée pour le gestionnaire comme raccourci pour function(){ return false; }."
Paul
7

J'ai aussi eu le même problème. J'avais aussi essayé ce que vous aviez essayé. Ensuite, je change ma méthode pour ne pas utiliser jquery mais en utilisant l'attribut "onsubmit" dans la balise form.

<form onsubmit="thefunction(); return false;">

Ça marche.

Mais, lorsque j'ai essayé de mettre la valeur de retour faux uniquement dans "thefunction ()", cela n'empêche pas le processus de soumission, donc je dois mettre "return false;" dans l'attribut onsubmit. Donc, je conclus que mon application de formulaire ne peut pas obtenir la valeur de retour de la fonction Javascript. Je n'en ai aucune idée.

Luki B. Subekti
la source
1
C'est la différence entre false;et return false;. Vous auriez besoin d'avoironsubmit="return thefunction();"
xr280xr
4

J'ai eu le même problème et je l'ai résolu de cette façon (pas élégant mais ça marche):

$('#form').attr('onsubmit','return false;');

Et cela a l'avantage, à mon avis, que vous pouvez inverser la situation à tout moment:

$('#form').attr('onsubmit','return true;');
vinxxe
la source
Il serait peut-être un peu plus confortable de simplement supprimer l'attribut lors du retour de la prévention de soumission de formulaire$('#form').removeAttr('onsubmit');
barbieswimcrew
4

Attachez l'événement à l'élément de soumission et non à l'élément de formulaire. Par exemple, dans votre html, faites comme ceci

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});
M Weiss
la source
2

Vous pouvez simplement vérifier si le formulaire est valide si oui, exécuter la logique de soumission sinon afficher une erreur.

HTML

<form id="form" class="form" action="page2.php" method="post">
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />

    <input type="submit" value="Okay!" />
</form>

Javascript

    $(document).ready(function () {
        var isFormValid = true;

        function checkFormValidity(form){
            isFormValid = true;
            $(form).find(".check-validity").each(function(){
                var fieldVal = $.trim($(this).val());
                if(!fieldVal){
                    isFormValid = false;
                }
            });
        }


        //option A
        $("#form").submit(function (e) {
            checkFormValidity("#form");
            if(isFormValid){
                alert("Submit Form Submitted!!! :D");
            }else{
                alert("Form is not valid :(");
            }
            e.preventDefault();
        });
    });
Espion de code
la source
1

Lorsque j'utilise une <form>balise sans attribut id="form"et que je l'appelle directement par son nom de balise dans jquery, cela fonctionne avec moi.
votre code dans un fichier html:

<form action="page2.php" method="post">

et en script Jquery:

$(document).ready(function() {
      $('form').submit(function(evt){
          evt.preventDefault();// to stop form submitting
      });
 });
Noha Salah
la source
1

$('#form')recherche un élément avec id="form".

$('form') recherche l'élément de formulaire

Rahul
la source
0

Vous oubliez l'identifiant du formulaire et cela fonctionne 

$('form#form').submit(function(e){
   e.preventDefault();
   alert('prevent submit');             
});
Shintadoniku Alyssa
la source
0

Cela semble également fonctionner et peut être légèrement plus simple:

$('#Form').on('submit',function(){
    return false;
})
Ukuser32
la source
0

En utilisant jQuery, vous pouvez effectuer les opérations suivantes:

1- Utilisez l'événement de soumission de formulaire natif avec un bouton Soumettre, tout en empêchant le déclenchement de l'événement, puis

2- Vérifiez le formulaire Propriété valide Cela peut être implémenté comme suit:

1- HTML:

 <form id="yourForm">
    <input id="submit" type="submit" value="Save"/>
</form>

2- Javascript

 $("form").on("submit", function (e) {
        e.preventDefault();
        if ($(this).valid()) {  
           alert('Success!');
        }
    });
Mohamed Nagieb
la source