2

I'm having multiple <form> on single page, all having unique IDs, and the form body is something like below.

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

I know it is not recommended to use tables for having aligned form fields and one can do this with CSS, but actual problem is that when I use $("#form-main").serializeArray, I should get all the fields of this form in my array object, but here I'm getting only fields of first table within the form, rest of the inputs are simply ignored.

Is this a valid behaviour of serializeArray() ? or my use of tables is the real issue? I can use divs instead of tables, but that'd be my last option. Also, in those multiple forms, first table is having fields which are mandatory to fill, so along with "validate-as-you-type" approach, I'm iterating over those mandatory fields to check that they are not left empty, so is that a reason why only first table of each form is included in array object.

Kushal
  • 3,112
  • 10
  • 50
  • 79
  • 4
    `I know it is not recommended to use tables for having aligned form fields` ... since when? Sure css works, but sometimes, simplicity is key. Don't let the "table-haters" get at ya. Nothing wrong with a well formed table. – SpYk3HH Apr 11 '12 at 14:57
  • 1
    Are all the fields in the 2nd table using the same `name` attribute as those in the 1st table? – Tim B James Apr 11 '12 at 14:57
  • 3
    2 things to check for btw, 1) is your form completely wrapping table, 2) do all inputs,selects,&textboxes have a `name` attribute? – SpYk3HH Apr 11 '12 at 14:58
  • 2
    @SpYk3HH tables are for tabular data, there is a reason why we are "table-haters" ;) – Tim B James Apr 11 '12 at 14:58
  • 2
    @TimBJames lol, that is not always true, in the world of "graphic design", sometimes its just easier and far less code to use an html table than to try and css everything out, not to mention, it tends to make important things, like forms, backwards compatible with older browsers. – SpYk3HH Apr 11 '12 at 14:59
  • Have you tried using $("#form-main > table") in your selector? – DaveRead Apr 11 '12 at 15:00
  • @TimBJames: All the fields in the entire page have unique names. – Kushal Apr 11 '12 at 16:35
  • @SpYk3HH: Yes I double checked and assured everything before posting the question, all the tables are enclosed by `
    ` and inputs have unique names.
     – Kushal Apr 11 '12 at 16:40

3 Answers3

4

I had this same problem. I had one form that worked and one form that didn't. Doing what Prestaul said helped confirm that there was something still amiss.

The problem was I had 'id' attributes, but NOT 'name' attributes. The serializeArray expects 'name' attributes on all of the input fields.

Rob

Rob Bramhall
  • 61
  • 4
3

This is a perfectly valid use of serializeArray and it should work with multiple elements with the same name as well. I just did a quick test (http://jsfiddle.net/Q5s5V/) and everything behaved as expected... I think there is something else wrong in your code.

One thing you could try is selecting the inputs themselves rather than the form and see 1) do you have all the inputs you are expecting and 2) does that collection serialize properly. 

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

My guess is that there is a markup error (unclosed tag or whatever) that is preventing those elements from being selected.

Prestaul
  • 83,552
  • 10
  • 84
  • 84
  • I don't know what I was missing out but the issue is solved when I rewritten the JS code which `$.merge()`d all the array objects of individual forms into single object and converting that again to JSON for sending via `$.ajax()`. Thanks.... – Kushal Apr 11 '12 at 16:54
  • I am facing same problem here but in my situation something like::
    (Actually In last two elements I set the value using JavaScript(Some functionality) I am not taking value from the user. Is this the problem??     – Shyam Dixit Oct 20 '13 at 13:09
  • @ShyamDixit, your problem is the structure of your html as well. You cannot close the first div before closing the form. Move the opening form tag outside of that outer div you you'll be ok. `
    `     – Prestaul Jan 06 '14 at 23:53
2

I know this is an old question, but I was surprised to not see the correct answer here. The problem is that you have TWO forms on the page, not one.

serializeArray() will only work on fields within the form tag that you specify, so using $("#form-main").serializeArray will only include field1 and field2.

Field3 and field4 are not included because they are not in #form-main, they are in #form-second.

ScienceofSpock
  • 73
  • 5