jQuery JSON encode set of input values

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

EDIT:

If I'm understanding your question correctly, this will give you the json object you want.

Note that it requires the json2 library.

var features = {};    // Create empty javascript object

$("#tr_Features :input").each(function() {           // Iterate over inputs
    features[$(this).attr('name')] = $(this).val();  // Add each to features object
});

var json = JSON.stringify(features); // Stringify to create json object (requires json2 library)

Thanks to R0MANARMY for pointing out the intended json format in the question.

---

Is there a reason you don't use jQuery's .serializeArray() function? You can run it on a subset of elements instead of the entire form.

$("#tr_Features :input").serializeArray();

From the docs: http://api.jquery.com/serializeArray/

The .serializeArray() method creates a JavaScript array of objects, ready to be encoded as a JSON string.

The .serializeArray() method can act on a jQuery object that has selected individual form elements, such as <input>, <textarea>, and <select>.

Answer 2

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!