jQuery AJAX formulaire soumet deux fois

J'ai un formulaire que je suis de la capture via jQuery et envoi via AJAX. Mon problème est que la forme présente plus d'une fois à chaque fois que j'actualise la page.

J'ai essayé de séparer le bouton soumettre, mais ensuite, le formulaire est affiché normalement après la première soumettre. Toute aide serait appréciée

$('#exportForm').submit(function() {
  $.ajax({
    type: "POST",
    url: $(this).attr('action'),
    data: $(this).serialize(),
    success: function(response) {
      $('#exportForm').unbind('submit');
      console.log(response);
    }
  });
  return false;
});
  • Je pense que vous avez besoin de fournir plus de code
  • Hey cosset, C'est à peu près tout ce qu'il ya d'autre qu'une forme très simple. Qu'est-ce que vous avez besoin?
InformationsquelleAutor James Privett | 2013-11-25
  1. 31

    Il est plus probable que vous êtes à l'aide d'un button ou submit pour déclencher l'ajax événement. Essayez ceci:

    $('#exportForm').submit(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: $(this).attr( 'action' ),
            data: $(this).serialize(),
            success: function( response ) {
                console.log( response );
            }
        });

        return false;
    });
    • Merci, j'ai enlevé le '$('#exportForm').unbind('submit'); "et ajouté un" e.preventDefault (); " et il semble avoir travaillé. Je vais accepter quand je peux.
    • Intéressant - vous voulez dire que le return false ne serait pas de travail afin d'éviter le défaut de se soumettre à l'action? jsfiddle.net/rR8Xz
    • Désolé, après plus de tests découvert il dose pas de travail.
    • Ce qui ne fonctionne pas? C'est encore de soumettre deux fois? Vous vous rendez compte que toute cette routine AJAX est en train de faire est assez standard soumettre par la POSTE, correct? Si #exportForm est un bouton, je vous suggère de changer le .submit à .click.
    • Cela n'a pas fonctionné pour moi non plus, j'ai dû ajouter de l'e.stopImmediatePropagation(); comme Chris Sercombe suggère ci-dessous.
    • J'ai également nécessaire à l'e.stopImmediatePropagation() comme par Chris réponse...
    • alors pourquoi est-ce marqué comme acceptée@JamesPrivett

    InformationsquelleAutor DevlshOne
  2. 109

    Ainsi que l'appel de preventDefault, aussi appel stopImmediatePropagation sur l'événement.

    $('#exportForm').submit(function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    $.ajax({
        type: "POST",
        url: $(this).attr( 'action' ),
        data: $(this).serialize(),
        success: function( response ) {
            console.log( response );
        }
    });

    return false;
});
    • Alors que votre réponse peut résoudre la question, il est toujours préférable si vous pouvez fournir une description sur la façon dont votre réponse, elle n'en résout. Dans ce cas, pourquoi preventDefault n'est pas assez. C'est une suggestion pour améliorer le présent et l'avenir de réponses.
    • Ajouter l'adresse.stopImmediatePropagation(); a fonctionné pour moi, merci Chris! J'ai été de me gratter la tête sur ce pendant environ 2 heures, ce soir. Alors que l'e.preventDefault() sur son propre a travaillé pour moi dans le passé, je soupçonne que c'est parce que c'est bien pour les simples liens ou des boutons, mais quand on travaille dans un formulaire de soumission de l'événement, vous devez utiliser l'e.stopImmediatePropagation() pour empêcher l'évènement de remonter par le dom. Voir api.jquery.com/event.stopImmediatePropagation.
    • C'est la réponse.
    • Vous avez raison, mais c'est aussi de ne pas travailler pour moi, ce qui pourrait être la raison possible
    • return false; est suffisant pour éviter le comportement par défaut et de remontée d'événements.
    InformationsquelleAutor Chris Sercombe
  3. 11

    Dans le cas où vous utilisez une certaine forme de validation (e.g jQuery de Validation), le formulaire est envoyé deux fois car en dehors de $('#exportForm').submit vous écrivez vous-même, la validation plugin va également soumettre le formulaire après avoir valide tous les le terrain.

    NB : Si vous utilisez jQuery de Validation, évitez d'utiliser .submit(). Au lieu de cela, utiliser submitHandler.

    InformationsquelleAutor ddanurwenda
  4. 3

    Vous pouvez simplement utiliser e.stopImmediatePropagation(); :

    Par exemple :

    $('#exportForm').submit(function(e){
    e.stopImmediatePropagation();
    InformationsquelleAutor Gammer
  5. 0

    Comme Chris Sercombe souligné, à l'e.stopImmediatePropagation() fonctionne et il arrête définitivement le problème, mais vous ne devriez pas avoir à l'utiliser. Le problème existe encore dans votre code quelque part. Permettez-moi de citer un exemple de la façon dont les deux postes les demandes peuvent être envoyées:

    Si vous êtes en utilisant AngularJS, et permet de dire que vous faites un contrôleur appelé "HandleAjaxController" on pourrait attribuer ce ng-controller dans un div, et puis accidentellement attribuer ce même ng-controller à l'intérieure de la div. Ce serait la cause de la poste demande à être envoyé deux fois. Donc:

        <div ng-controller='HandleAjaxController'>
        <div ng-controller='HandleAjaxController'>
            <button id="home" type="button" class="btn btn-success">Send data</button>

    Cela a causé beaucoup de stress pour moi car dans mon ng-route j'ai dû mettre le contrôleur en ici:

        $routeProvider
    .when("/", {
        templateUrl : "src/js/partials/home.html",
        controller : "HandleAjaxController"
    })

    et puis j'ai mis de nouveau dans mon home.html: <div ng-controller='HandleAjaxController'>

    De toute façon, c'est un bon exemple de la façon dont les deux postes pourraient être envoyés.

    InformationsquelleAutor Adam
  6. 0

    j'ai ajouté jquery.unobtrusive-ajax.min.js réf deux fois répondu ici https://stackoverflow.com/a/15041642/4412545

    InformationsquelleAutor Snziv Gupta
  7. 0

    Vous devriez vérifier votre autre code js, peut-être que quelque part, il déclenche deux fois "soumettre" de l'événement.
    Ce qui s'est passé dans mon cas, j'ai oublié "return false" dans le onclick gestionnaire pour un bouton

    InformationsquelleAutor Vladimir Leonov
  8. 0

    Pour quelqu'un qui ont presque le même problème, je peux dire que vous devez contrôler votre jQuery événements à l'écart de la fonction(){}, de sorte que le meilleur a seulement une demande de l'ajax POST est d'avoir des événements comme celui-ci: 

    $(document).ready(function {
 $("#exportForm").click(function{
   $.ajax({
      type: "POST",
      url: "#", //your url
      data: data, //your variable
      success: function(){
        //do something here
      }
   });
 });
});

    pas en fonction de qui évoque deuxième fonction comme ceci:

    $(document).ready(function {
 exportingForm();

 function exportingForm(){
   $("#exportForm").click(function{
     $.ajax({
        type: "POST",
        url: "#", //your url
        data: data, //your variable
        success: function(){
          //do something here
        }
     });
   });
 }
});
    InformationsquelleAutor gutkol
  9. 0

    Veux juste souligner, si vous avez plus d'un élément avec la même classe, ce qui peut arriver aussi bien.

    <button class="downvote">
  <img src="/img/thumbs-down.png" class="downvote">
</button>
    InformationsquelleAutor Eddie
  10. -2

    Le problème peut être résolu en utilisant une div à la place d'un bouton sur votre formulaire php. Un bouton n'est pas nécessaire en raison de l'utilisation d'ajax.

    InformationsquelleAutor Kazario