2009-02-26 18 views
3

Ich versuche ein Formular mit Jquery Ajax zu senden. Es hat ein paar Textfelder, einige Kontrollkästchen und eine Dropdown-Liste mit mehreren Optionen (d. H. Mehrere Optionen können ausgewählt werden).Wie reiche ich ein komplexes Formular mit Jquery's AJAX ein?

Jemand hier hat mir gesagt, dass ich Werte aller ausgewählten Kontrollkästchen bekommen

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

Dann mit Ich kann eine Schleife durch alle von den obigen Code zurückgegebenen Werte, weisen sie auf ein Array wie folgt aus:

var types=new Array(); 

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

Und versuchen Sie das Formular abzuschicken mit diesen:

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

Aber das doesn‘ t Arbeit, speziell die Checkboxen werden nicht korrekt übermittelt. Wie kann ich es zum Laufen bringen?

Antwort

5

Ich empfehle, ein Plug-in dafür zu verwenden. Werfen Sie einen Blick auf diese form plug-in. Es kann auch schön mit validation plug-in integrieren.

+0

Dies ist die beste Idee. Es erlaubt Ihnen auch, Dateien über Ajax hochzuladen. –

13

Es ist nicht notwendig, über jedes Feld zu iterieren, um die Formularwerte zu erhalten. jQuery verfügt über eine Methode zum Serialisieren von Formulareingaben in eine Abfragezeichenfolge. Sie können dies tun:

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

Denken Sie daran, dass JavaScript Beiträge immer Daten in UTF-8-Format, so sicher sein, Sie erwarten, dass auf dem Back-End, wenn Sie Text senden mit internationalen Zeichen zu planen.

2

Die Standard-jQuery $.param behandelt keine Arrays (by design), so dass Sie $ .serialize nicht verwenden können, wie es ist. Verwenden Sie entweder ein Plugin, wie in kgiannakis' answer vorgeschlagen oder überschreiben die $ .param Funktion, so dass es Arrays richtig behandeln werden:

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); 

... und dann mit $ .serialize, wie von Danita vorgeschlagen.

Verwandte Themen