2010-09-30 6 views
5

Wie serialisiere ich dynamische Formulareingaben?Wie verwendet man jQuerys .serialize-Funktion mit dynamischen Formularelementen

<table id="mytable"> 
<form id="myform"> 
<tbody> 
    <tr><td><input type="text" name="row0"></td></tr> <!-- dynamically generated --> 
    <tr><td><input type="text" name="row1"></td></tr> <!-- dynamically generated --> 
    <tr><td><input type="text" name="row2"></td></tr> <!-- dynamically generated --> 
    <tr><td><input type="text" name="row3"></td></tr> <!-- dynamically generated --> 
</tbody> 
<tfoot> 
    <tr><td><input type="button" id="save" value="SAVE"></td></tr> <!-- static --> 
</tfoot> 
</form> 
</table> 

Ich möchte jQuery verwenden Informationen von php Diese funktionieren würde kein Problem

$('#save').click(function(){ 
    $.ajax({ 
    type: "POST", 
    url: "post.php", 
    data: $('#myform').serialize(), 
    success: function(msg){ 
     console.log(msg); 
    } 
    }); 
}); 

zu laden, wenn die Zeilen nicht dynamisch generiert wurden, aber ich kann nicht herausfinden, wie die für den Zugriff auf oder serialisiert dynamischer Inhalt.

Antwort

11

Serialisierung von dynamischen Inhalten funktioniert so, wie Sie es haben (da Sie es in einem click Handler tun, nicht auf Last) ... aber Sie müssen ein gültiges <form> Element um die <table> gewickelt haben, wie folgt aus:

<form id="myform"> 
<table id="mytable"> 
<tbody> 
    <tr><td><input type="text" name="row0"></td></tr> <!-- dynamically generated --> 
    <tr><td><input type="text" name="row1"></td></tr> <!-- dynamically generated --> 
    <tr><td><input type="text" name="row2"></td></tr> <!-- dynamically generated --> 
    <tr><td><input type="text" name="row3"></td></tr> <!-- dynamically generated --> 
</tbody> 
<tfoot> 
    <tr><td><input type="button" id="save" value="SAVE"></td></tr> <!-- static --> 
</tfoot> 
</table> 
</form> 

You can test it out here.

+0

Es wurde aufgenommen, wenn es nicht dynamisch generiert wurde. Ich frage mich, warum es Probleme hat, wenn es dynamisch ist. – polyhedron

+1

Das hat es aber behoben. – polyhedron

+0

@polyedron - Mit ungültigem Markup sind die Dinge unportierbar ... vielleicht hat es das Formular anders im DOM mit den Elementen davor platziert. –

Verwandte Themen