9 votes

Pourquoi mon formulaire est-il soumis deux fois ?

Pour une raison quelconque, mon formulaire est soumis deux fois avec une seule pression sur le bouton. C'est la première fois que j'utilise le plugin jquery Form, et j'imagine que jquery se soumet une fois et que le formulaire se soumet "naturellement" aussi. J'ai vu que le remède consiste à attacher un "return false" au gestionnaire d'événement onSubmit du formulaire. Je pensais l'avoir fait, mais visiblement, cela ne fonctionne pas.

Quelqu'un peut-il m'aider ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>User form entry </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.validate.js"></script>
<script src="jquery.passwordStrength.js"></script>
<script src="jquery.form.js"></script>
<script>

$(document).ready(function() {
    $('#signupForm').ajaxForm(function() { 
         var queryString = $('#signupForm').formSerialize(); 
         $.post('process.php', queryString);
    });
});
</script>
</head>
<body>
   <form id="signupForm" action="process.php" onsubmit="return false" method="post">
   <fieldset class="password">
          ... form goes here
   <button type="submit" name="formSubmit" value="submit">Click to submit</button>
   </form>

<div id="results"></div>

</body>
</html>

J'ai essayé d'ajouter onsubmit="return false" à l'élément de formulaire, mais je n'ai pas de soumission du tout. J'ai également essayé d'ajouter "return false ;" au jQuery, mais j'ai toujours deux soumissions. Que me manque-t-il ? Cela semble être la méthodologie standard selon le site de jQuery Form Plugin en quoi mon formulaire est-il différent ?

(En passant, juste pour être clair.. Je ne parle pas du problème d'avoir plusieurs soumissions de formulaire consécutives en appuyant sur le bouton à plusieurs reprises. Mon problème est "une pression sur le bouton de soumission = deux soumissions").

20voto

ManseUK Points 26965
$('#signupForm').ajaxForm(function() { 
            var queryString = $('#signupForm').formSerialize(); 
            $.post('process.php', queryString);

});

Il s'agit de le soumettre deux fois .... le ajaxForm une fois et ensuite la méthode post() la deuxième fois

El ajaxForm gère la sumbission du formulaire pour vous ... vous n'avez pas besoin d'ajouter l'option post() ... la fonction à l'intérieur de la méthode ajaxForm est un callback, exécuté en cas de succès ...

$('#signupForm').ajaxForm(function() { 
       alert("Thank you for your comment!"); 
});

ce code afficherait l'alerte après le post réussi ... exemple simple ici -> http://jquery.malsup.com/form/

Vous devez également supprimer le onsubmit du formulaire ...

Mise à jour

Si vous voulez montrer des résultats ... faites-le comme ceci :

$(document).ready(function() { 
    $('#signupForm').ajaxForm({ target: '#results' }); 
    // this will output the responseText from the submitted form to the target DOM element
});

0voto

manny Points 741

Éviter d'utiliser

<button type="submit" name="formSubmit" value="submit">

donc naturellement votre bouton submit fera un submit et votre jquery fera un autre submit

utiliser ce

<input type="button" name="formSubmit" value="submit">

0voto

Diego Marafetti Points 341

Essayez d'utiliser ceci :

onsubmit="void(0);"

-1voto

Diodeus Points 67946

N'utilisez pas un submit bouton. Utilisez un bouton ordinaire.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X