Ajax demande soumise plusieurs fois

Question

Je travaille sur la fixation de la validation de mes formulaires. La validation fonctionne, le problème est que lorsqu'aucune erreur de validation ne se produit, le formulaire soumet autant de fois que l'utilisateur a tenté de soumettre. C'est comme si les requêtes s'empilaient sur une pile.

Forms a ce bouton d'envoi qui appelle ma fonction ajax create_new_stuff

<input id='submitButton' onclick='create_new_stuff()' name='submit' type='submit' value='create' /> 

La fonction

function create_new_stuff(){ 

    $("#createForm").submit(function(event){  

     event.preventDefault(); 
     event.returnValue = false; 

     var input_value = $("#createValue").val(); 

     if(input_value === "" || null){ 

      console.log("Wrong input value"); 
      return; 
     } 
     else{ 

      var request; 
      var $form = $(this); 
      var serializedData = $form.serialize(); 

      request = $.ajax({ 
       url: "/new_stuff.php", 
       type: "post", 
       data: serializedData    
      }); 

      // callback handler that will be called on success 
      request.done(function (response, textStatus, jqXHR){ 

       console.log("Stuff created!", response);    
       create_new_stuff_form(); 
       var successDiv = $("<div class='success'>Stuff was created</div>"); 
       $("#responseMessages").html(successDiv); 

      }); 

      // callback handler that will be called on failure 
      request.fail(function (jqXHR, textStatus, errorThrown){ 

       console.error(
        "The following error occured: "+ 
        textStatus, errorThrown 
       ); 

      });   
     }   
    }); 
} 

Answer 1

au lieu d'ajouter pour former onclick événement pour le bouton d'envoi, ajouter onsubmit événement.

<form onsubmit= 'create_new_stuff()'> 
</form> 

Answer 2

<input id='submitButton' onclick='return create_new_stuff()' name='submit' type='submit' value='create' /> 

Et return false lorsque vous ne voulez pas soumettre le formulaire de votre javascript fonction.

Answer 3

bouton Modifier le type soumettre à bouton ou changer onclick onsubmit

Answer 4

EMPÊCHE le bouillonnement de l'événement par:

event.stopPropagation(); 

Answer 5

Chaque fois que vous cliquez sur le bouton d'envoi onclick appelle la méthode create_new_stuff() pour faire les choses nécessaires. Si vous pensez faire cela sur le formulaire, cliquez sur le bouton ou sur le bouton pour afficher le même comportement. Vous pouvez essayer quelque chose comme ceci:

HTML

<label for="formelement">Enter Value Here:</label> 
<input type="text" id="formelement" name="formelement"> 
<input type="submit" id="submitbutton" value="Submit"> 

JS

$("#submitbutton").on('click', function(e) { 
e.preventDefault(); 
$('#submitbutton').attr('disabled',true); 
var x = $("#formelement").val(); 
    if(x=="" || null) 
{ 
    console.log("Wrong Input..!!"); 
    return; 
} 
else { 
    console.log("Hello" + " " +x); 
} 
}); 

travail Démo: DEMO

Et vous pouvez mettre un chargeur ici pour montrer l'action du serveur en cours.