web-dev-qa-db-fra.com

Utilisation de JQuery - empêche la soumission du formulaire

Comment puis-je empêcher un formulaire de soumettre à l'aide de jQuery?

J'ai tout essayé - voir les 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;
            });
    });

Quel pourrait être le problème?

Mise à jour - voici mon code 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 at-il quelque chose de mal ici?

jqueryforms
148
Lucy Weatherford

Deux choses se démarquent:

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

  • De plus, e.preventDefault est la syntaxe correcte de JQuery, 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>
220
Philip Fourie

Vous avez probablement peu de formulaires sur la page et en utilisant $ ('formulaire'). 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 meilleure version de celui-ci:

$(document).on("submit", "form", function(e){
    e.preventDefault();
    alert('it works!');
    return  false;
});
26
Artem Kiselev

Pour empêcher l'utilisation par défaut/empêchée de soumettre le formulaire

e.preventDefault();

Pour arrêter l’utilisation des événements

e.stopPropagation();

Pour empêcher la soumission du formulaire, "return false" devrait également fonctionner.

17
The Alpha

J'ai aussi eu le même problème. J'avais aussi essayé ce que tu avais essayé. Ensuite, je change de 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 fausse uniquement dans "thefunction ()", cela n'empêche pas le processus de soumission; je dois donc mettre "retourne false"; dans l'attribut onsubmit. Je conclus donc que mon application de formulaire ne peut pas obtenir la valeur de retour de la fonction Javascript. Je n'en ai aucune idée.

5
Luki B. Subekti

J'ai eu le même problème et j'ai résolu ce problème (pas élégant mais ça marche):

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

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

$('#form').attr('onsubmit','return true;');
3
vinxxe

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

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

Vous pouvez simplement vérifier si le formulaire est valide si oui, exécutez la logique d'envoi, sinon indiquez 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();
        });
    });
1
Code Spy

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

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

1
Rahul

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

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

et dans le script JQuery:

$(document).ready(function() {
      $('form').submit(function(evt){
          evt.preventDefault();// to stop form submitting
      });
 });
1
Noha Salah
// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});

à partir d'ici: https://api.jquery.com/submit-selector/ (page intéressante sur les types d'envoi)

0
Chris Strong

Vous oubliez l'identifiant du formulaire, et cela fonctionne

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