input type = "submit" au lieu de input type = "bouton" avec AJAX?

Question

J'ai un formulaire AJAX que je configure en utilisant un <input type="button"> avec une action jQuery .click en cours de définition. Le problème est que, parce qu'il n'y a pas de <input type="submit"> dans le formulaire, le formulaire ne présente pas de façon traditionnelle, donc les valideurs de formulaires ne fonctionnent pas toujours, et appuyer sur le bouton Entrée ne fait rien.

Si j'ajoute une entrée de soumission, quand on clique dessus (ou que l'entrée est atteinte, etc.), la page se recharge comme si ce n'était pas un formulaire AJAX.

Qu'est-ce qui me manque ici?

Answer 1

Utilisez un bouton de soumission. Le bouton de soumission sera plus compatible en termes de comportement du navigateur par défaut, par exemple en appuyant sur Entrée. Ensuite, sur l'événement de soumission, il vous suffit d'annuler la soumission du formulaire et d'exécuter votre code AJAX.

<form onsubmit="return false;"> 
<!--Blah Blah Blah--> 
<input type="submit"> 
</form> 

Si vous utilisez jQuery, vous pouvez utiliser une méthode plus « propre »

$('#form_id').bind('submit',function(e) { 
    e.preventDefault(); //Will prevent the submit... 
    //Add additional code here 
}); 

Answer 2

comportement est plutôt sous forme de changement submit et garder votre bouton <input type="submit"> ainsi:

$("form").submit(function(e){ 
    e.preventDefault(); 
    // do ajax submition 
    $.ajax({ 
     url: "SomeURL", 
     type: "POST", 
     data: $(this).serializeArray(), 
     success: function(data, status, xhr) { 
      // do the success stuff 
     }, 
     error: function(xhr, status err) { 
      // do the error stuff 
     } 
    }); 
}); 

Avantage: La bonne chose est que cela fonctionne dans tous les cas lorsque vous appuyez sur ENTER sur l'une des l'entrée du formulaire éléments ou cliquez sur le bouton Envoyer. Cela fonctionnera toujours sans exception.