Question

I need tp serialize a group of input elements but I can’t for the life of me figure out this simple task.

I can successfully iterate through the targeted inputs using:

$("#tr_Features :input").each(function() {
    ...
}

Here’s my code, that doesn’t work:

var features = "";
$("#tr_Features :input").each(function() {
    features += {$(this).attr("name"): $(this).val()};
}

Serializing the entire form won’t give me what I need. The form has much more than this subset of inputs. This seems like it should be a pretty straightforward task but apparently programming late into a Friday afternoon isn’t a good thing.

If it’s helpful, here’s the form inputs I’m targeting:

<table cellspacing="0" border="0" id="TblGrid_list" class="EditTable" cellpading="0">
<tbody><tr class="FormData" rowpos="1">
    <td class="CaptionTD ui-widget-content">Cable Family</td>
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:8" name="feature_id:8"></td>
</tr>
<tr class="FormData" rowpos="1">
    <td class="CaptionTD ui-widget-content">Material</td>
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:9" name="feature_id:9"></td>
</tr>
<tr class="FormData" rowpos="1">
    <td class="CaptionTD ui-widget-content">Thread Size</td>
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:10" name="feature_id:10"></td>
</tr>
<tr class="FormData" rowpos="1">
    <td class="CaptionTD ui-widget-content">Attachment Style</td>
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:11" name="feature_id:11"></td>
</tr>
<tr class="FormData" rowpos="1">
    <td class="CaptionTD ui-widget-content">Feature</td>
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:12" name="feature_id:12"></td>
</tr>
<tr class="FormData" rowpos="1">
    <td class="CaptionTD ui-widget-content">Comments</td>
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:13" name="feature_id:13"></td>
</tr>

Answer 1

Apparently all I was creating was an object the long and hard way. That sounded worse than it should have but it’s true. All I needed to do was use the name attribute at the index/key and the val() as the value.

var data = new Object();
$("#tr_Features :input").each(function() {
    data[$(this).attr("name")] = $(this).val();
});
return data;

This worked. Who knew?! Simple really. Y’all got an up arrow from me for lending a hand and going on this escalate I call Friday. Cheers!