Not able to get nested table input elements into jQuery array

Question

I know this shouldn't be this hard, but I need another pair of eyes because I'm beating my head against a wall.

I have a NESTED table with an ID such as:

<table id="dwMeasurements_0">
<tbody>
    <tr id="tDim_0">
        <td colspan="2">
        <strong>Total Wall Length: </strong>
        </td>
        <td>
        <input type="text" id="Msr_0_T1" class="dwInput" value="0"> Inches and </td>
        <td>
        <input type="text" id="Msr_0_T2" class="dwInput" style="margin-left:2px;" value="0"> 16ths</td>
    </tr>
    <tr>
        <td colspan="4">
        <hr>
        </td>
    </tr>
    <tr id="lDim_0_0">
        <td>
            <select id="ItemType_0_0">
                <option>Item Type</option>
                <option>Door</option>
                <option>Window</option>
                <option>Other</option>
            </select>
        </td>
        <td>
        <label>L-Dim: </label>
        </td>
        <td>
        <input type="text" id="Msr_0_0_A1" class="dwInput" value="0"> Inches and </td>
        <td>
        <input type="text" id="Msr_0_0_A2" class="dwInput" style="margin-left:2px;" value="0"> 16ths</td>
    </tr>
//MORE ROWS HERE//
</table>

My jQuery to serialize the text inputs and select elements are as follows:

var MeasureRowCount = $("[id^='MeasureRow_']").length; //Populated by counting parent rows 
var htmlOutput = '';
var rowInputs,rowSelects;
for(var r=0;r < MeasureRowCount;r++){
    rowInputs = $('#dwMeasurements_'+r+' :input').serializeArray();
    rowSelects = $('#dwMeasurements_'+r).find('select').serializeArray();

            $.each(rowSelects, function(i, eSelectItem){
        esName = eSelectItem.name;
        esVal = eSelectItem.value;                

                     htmlOutput += //name and value from above with markup
            }
}

// htmlOutput to DOM here with markup

I've tried multiple methods to collect the input elements and none work. The arrays come up empty. Even though the table is nested, shouldn't it work since I'm directly calling the nested table ID?

Using a selector like `[id^='MeasureRow_']` is a good indicator that you should be using a common class instead. — Blazemonger, Feb 19 '13 at 15:04
adding to what @Blazemonger said, I don't see where you're using any id's with `MeasureRow_something`, the count of MeasureRowCount will be 0 — Trufa, Feb 19 '13 at 15:07
The "MeasureRow_" is the parent that's used to simply count rows for the loop where the nested tables reside. It's not important otherwise unless it's needed to call child elements? — gtr1971, Feb 19 '13 at 15:08
The `MeasureRow_` is created dynamically with a number stuck at the end, so the id's will all be unique when they're created. I didn't include that here since the count of `MeasureRow_` works to populate the loop variable. — gtr1971, Feb 19 '13 at 15:17
We can't debug your code if we can't create a self-contained example of it. — Blazemonger, Feb 19 '13 at 15:53

score 1 · Answer 1 · answered Feb 19 '13 at 15:07

1

This code:

for(var r=0;r < MeasureRowCount;r++){
    rowInputs = $('#dwMeasurements_'+r+' :input').serializeArray();

Will overwrite the value of rowInputs every time it loops.

Try using jQuery.merge to combine them instead:

var rowInputs=[],rowSelects=[];
for(var r=0;r < MeasureRowCount;r++){
    $.merge(rowInputs, $('#dwMeasurements_'+r+' :input').serializeArray());

answered Feb 19 '13 at 15:07

Blazemonger

90,923
26
142
180

I tried the merge, but still no dice. It does create an array but it still comes up empty. I'm curious if the fact that the dynamically created `input` elements seem to be losing their closing slash `/>` in the published DOM is causing the issue? – gtr1971 Feb 19 '13 at 15:21
The dynamically created `input` elements DO have the ending slash in the jQuery that creates them, but they seem to get stripped out in the DOM. – gtr1971 Feb 19 '13 at 15:23
That closing slash isn't important except in XHTML. Don't confuse HTML markup (what you write in code) with DOM elements (objects the browser creates from the HTML). – Blazemonger Feb 19 '13 at 15:33
Are you sure that `$('#dwMeasurements_'+r+' :input').serializeArray()` actually contains anything? – Blazemonger Feb 19 '13 at 15:34
I get an array, it's just empty. The HTML I posted above is what's actually on the page when the script runs, so even if the values are zero, I should still get the name of the element with a zero (or null) value - right? .... I've also updated the jQuery above to show more of what it's doing in the loop, but the problem is that my two arrays are empty before the loop gets started. – gtr1971 Feb 19 '13 at 15:46
I can't test or debug your code as long as `$("[id^='MeasureRow_']").length` equals zero. Perhaps that's the source of your problems? – Blazemonger Feb 19 '13 at 15:52
that length equals 1, which is correct... I set a breakpoint in mid loop to check the arrays and they're empty, so it should at least create an array of inputs on the zero loop before they got overwritten, wouldn't you think? – gtr1971 Feb 19 '13 at 16:06

score 0 · Accepted Answer · answered Feb 19 '13 at 19:18

The answer wasn't 100% intuitive, but I should've known...

The serializeArray() method defaults to using name:value pairs when collecting elements, and the elements I was collecting didn't have any "name" attributes, only id's. Once I added names, the arrays populated as desired.

Not able to get nested table input elements into jQuery array

2 Answers2