web-dev-qa-db-fra.com

jQuery AJAX formulaire soumis deux fois

J'ai un formulaire que je capture via jQuery et que j'envoie via AJAX. Mon problème est que le formulaire envoie plus d'une fois à chaque fois que j'actualise la page.

J'ai essayé de dissocier le bouton d'envoi, mais le formulaire est posté normalement après le premier envoi. 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;
});
jqueryajaxsubmit
37
James Privett

Il est fort probable que vous utilisiez une variable button ou submit pour déclencher l'événement ajax. Essaye ça:

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

        return false;
    });
28
DevlshOne

En plus d'appeler preventDefault, appelez également 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;
});
98
Chris Sercombe

Si vous utilisez un type de validation (par exemple, validation jQuery), le formulaire est soumis deux fois car, mis à part $('#exportForm').submit, vous écrivez vous-même, le plug-in de validation soumettra également le formulaire une fois qu'il aura validé le champ.

NB: Si vous utilisez la validation jQuery, évitez d’utiliser .submit(). À la place, utilisez submitHandler .

11
ddanurwenda

Vous pouvez simplement utiliser e.stopImmediatePropagation();:

Par exemple :

$('#exportForm').submit(function(e){
    e.stopImmediatePropagation();
1
Gammer

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

0
Kazario

Comme l'a souligné Chris Sercombe, e.stopImmediatePropagation () fonctionne et corrige définitivement le problème, mais vous ne devriez pas avoir à l'utiliser. Le problème existe toujours dans votre code quelque part. Permettez-moi de citer un exemple montrant comment deux demandes de publication peuvent être envoyées:

Si vous utilisez AngularJS et supposons que vous créez un contrôleur appelé "HandleAjaxController", vous pouvez affecter ce contrôleur ng à un div, puis affecter accidentellement ce même contrôleur à un div interne. Cela ferait en sorte que la demande de publication soit envoyée deux fois. Alors:

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

Cela m'a causé beaucoup de stress une fois parce que j'avais configuré le contrôleur ici:

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

puis je le repasse dans mon home.html: <div ng-controller='HandleAjaxController'>

Quoi qu’il en soit, c’est un exemple de la façon dont deux publications pourraient être envoyées.

0
Adam

Pour quelqu'un qui a presque le même problème, je peux dire que vous devriez contrôler vos événements jQuery en dehors de function () {}, de sorte que le meilleur moyen de ne recevoir qu'une seule demande d'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 qui évoque une seconde fonction comme celle-ci:

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

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

Vous devriez vérifier votre autre code js, peut-être que quelque part, il déclenche deux fois l'événement "submit" . Cela s'est produit dans mon cas.

0
Vladimir Leonov

j'ai ajouté jquery.unobtrusive-ajax.min.js à deux reprises, comme indiqué ici/ https://stackoverflow.com/a/15041642/4412545

0
Snziv Gupta