Comment soumettre un formulaire complexe en utilisant AJAX de Jquery?

Question

J'essaye de soumettre un formulaire utilisant l'ajax de Jquery. Il a quelques boîtes de texte, quelques cases à cocher, et une liste déroulante d'options multiples (c'est-à-dire que plusieurs options peuvent être sélectionnées).

Quelqu'un ici m'a dit que je peux obtenir des valeurs de toutes les cases sélectionnées à l'aide

$("input:checkbox[name=type]:checked") 

boucle Ensuite, je peux à travers toutes les valeurs renvoyées par le code ci-dessus, les affecter à un tableau comme celui-ci:

var types=new Array(); 

    $.each(cboxes, function() 
     { 
     types[types.length]=$(this).val(); 
     } 
    ); 

Et essayer de soumettre le formulaire en utilisant ceci:

var someField=$("#someField").val(); 
var someField2=$("#someField2").val(); 
var data={field1 : someField, field2=someField2, s_types:types}; 
$.post("signup.php?type=p",types); 

Mais ce n » t travail, en particulier les cases à cocher ne sont pas soumises correctement. Comment puis-je le faire fonctionner?

Answer 1

Je recommande d'utiliser un plug-in pour cela. Jetez un oeil à ce form plug-in. Il peut également s'intégrer bien avec validation plug-in.

Answer 2

Il n'est pas nécessaire de parcourir chaque champ pour obtenir les valeurs de formulaire. jQuery a une méthode pour sérialiser les entrées de formulaire dans une chaîne de requête. Vous pouvez le faire:

$.ajax({ 
    url: "mybackend.php", 
    data: $("#myForm").serialize(), 
    success: function(e) { // do something on success }, 
    error: function(e) { // do something on error } 
}); 

Rappelez-vous que javascript messages toujours envoyer des données au format UTF-8, alors assurez-vous que vous vous attendez à ce que sur le back-end si vous envisagez d'envoyer du texte avec des caractères internationaux.

Answer 3

La valeur par défaut de jQuery $.param ne gère pas les tableaux (by design), vous ne pouvez donc pas utiliser $ .serialize tel quel. Utilisez un plug-in, comme suggéré dans kgiannakis' answer, ou remplacer la fonction .param $ il va gérer correctement les tableaux:

function($) { 
    $.param = function(a) { 
    var s = []; 
    if (a.constructor == Array || a.jquery) 
     jQuery.each(a, function() { s.push(encodeURIComponent(this.name) + "=" + encodeURIComponent(this.value)); }); 
    else 
     for (var j in a) 
     if (a[j] && a[j].constructor == Array) jQuery.each(a[j], function(){ s.push(encodeURIComponent(j) + "[]=" + encodeURIComponent(this)); }); 
     else s.push(encodeURIComponent(j) + "=" + encodeURIComponent(a[j])); 
    return s.join("&").replace(/%20/g, "+"); 
    }; 
})(jQuery); 

... puis utilisez .serialize $, comme suggéré par Danita.