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
– Blazemonger, Commented Feb 19, 2013 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
– Trufa, Commented Feb 19, 2013 at 15:07
The "MeasureRow_" is the parent <tr> 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
– gtr1971, Commented Feb 19, 2013 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
– gtr1971, Commented Feb 19, 2013 at 15:17

Blazemonger · Accepted Answer · 2013-02-19 15:07:13Z

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, 2013 at 15:07

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

gtr1971 Over a year ago

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 Over a year ago

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.

Blazemonger Over a year ago

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 Over a year ago

Are you sure that $('#dwMeasurements_'+r+' :input').serializeArray() actually contains anything?

gtr1971 Over a year ago

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 · Accepted Answer · 2013-02-19 19:18:28Z

0

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.

answered Feb 19, 2013 at 19:18

gtr1971

2,7382 gold badges19 silver badges23 bronze badges

Collectives™ on Stack Overflow

Not able to get nested table input elements into jQuery array

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related