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

you're trying to += an array... try using features.push or use the index from the $.each function: features[i] = someval

EDIT

I noticed that you have the same id for all your trs (and some of your tds!). That may be causing some problems as well. Make sure all your ids are unique.

Answer 2

+= doesn't add objects to arrays in JavaScript. What you want is .push():

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

But wait, there's more! jQuery doesn't support converting an object to a JSON string as far as I know (it supports parsing JSON, though). You need to use a separate JSON library for that, such as this one.

Answer 3

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 4

Apparently all I was creating was an object the long and hard way. That sounded worse that it should have but it's true. All I needed to 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!