$ .serializeArray() enthält nicht alle Felder in Formular

Question

Ich habe mehrere <form> auf einer einzigen Seite, alle mit eindeutigen IDs, und der Formularkörper ist etwas wie unten.

<form id="form-main"> 
    <table> 
     <tr> 
      <td><input type="text" name="field1"/></td> 
       . . . . . . . 
       . . . . . . . 
     </tr> 
    </table> 
    <table> 
     <tr> 
      <td><input type="text" name="field2"/></td> 
       . . . . . . . 
       . . . . . . . 
     </tr> 
    </table>  
</form> 

<form id="form-second"> 
    <table> 
     <tr> 
      <td><input type="text" name="field3"/></td> 
       . . . . . . . 
       . . . . . . . 
     </tr> 
    </table> 
    <table> 
     <tr> 
      <td><input type="text" name="field4"/></td> 
       . . . . . . . 
       . . . . . . . 
     </tr> 
    </table> 
</form> 

Ich weiß es nicht Tabellen empfohlen zu verwenden, um Formularfelder ausgerichtet zu haben, und man kann mit CSS dies zu tun, aber eigentliche Problem ist, dass, wenn ich $("#form-main").serializeArray verwenden, sollte ich alle Felder des Formulars erhalten sie in meinem Array-Objekt, aber hier bekomme ich nur Felder der ersten Tabelle innerhalb des Formulars, Rest der Eingaben werden einfach ignoriert.

Ist dies ein gültiges Verhalten von serializeArray()? oder meine Verwendung von Tabellen ist das eigentliche Problem? Ich kann anstelle von Tabellen div s verwenden, aber das wäre meine letzte Option. In diesen mehreren Formularen enthält die erste Tabelle Felder, die ausgefüllt werden müssen. Daher überarbeite ich mit dem Ansatz "Validierung als-du-Typ" diese Pflichtfelder, um zu prüfen, ob sie nicht leer bleiben Dies ist ein Grund, warum nur die erste Tabelle jedes Formulars im Array-Objekt enthalten ist.

Answer 1

Dies ist eine vollkommen gültige Verwendung von serializeArray und es sollte mit mehreren Elementen mit dem gleichen Namen auch funktionieren. Ich habe gerade einen Schnelltest gemacht (http://jsfiddle.net/Q5s5V/) und alles hat sich wie erwartet verhalten ... Ich denke, da ist etwas anderes in deinem Code falsch.

Eine Sache, die Sie versuchen könnten, wählt die Eingänge selbst anstelle der Form und sehen 1) haben Sie alle Eingänge, die Sie erwarten und 2) macht diese Sammlung ordnungsgemäß serialisieren.

var $elements = $('#form-main :input'); 
console.log($elements.length); 
console.log($elements.serializeArray()); 

Meine Vermutung ist, dass ein Markup-Fehler (nicht geschlossenes Tag oder was auch immer) verhindert, dass diese Elemente ausgewählt werden.

Answer 2

Ich weiß, das ist eine alte Frage, aber ich war überrascht, die richtige Antwort hier nicht zu sehen. Das Problem ist, dass Sie zwei Formulare auf der Seite haben, nicht eins.

serializeArray() funktioniert nur mit Feldern innerhalb des von Ihnen angegebenen Formular-Tags, also mit $ ("# form-main"). SerializeArray enthält nur field1 und field2.

Feld3 und Feld4 sind nicht enthalten, da sie nicht in # Form-Haupt sind, sie sind in # Form-Sekunde.