how to construct JSON before submitting form using javascript

Question

I have the following demo on jsFiddle. I would like to submit this form using javascript and send a JSON object back to my controller.

As you can see multiple rows can be added to the table and submitted. In my JSON data I would like to keep track of which checkboxes got clicked for which rows. So for example, based on the below screen shot:

I would like the JSON object to look like this:

{light:[{red:on}, {yellow:off},{green:on}], dark:[{red:off}, {yellow:off},{green:on}]}...

Answer 1

The code I came up with looks like this:

var jsonObject = {};
$('.input-row').each(function(index, row) {
    var innerObject = {};
    $(':checkbox', row).each(function(index, checkbox) {
        innerObject[checkbox.name] = checkbox.checked ? 'on' : 'off';
    });
    var key = $('input[type="text"]', row).val();
    jsonObject[key] = innerObject;
});
console.log(jsonObject);
// use jsonObject somehow

We're creating an empty object that will be our overall JSON object (called jsonObject ).

Then we're iterating over each of the rows of inputs (I've added an input-row class to these so they can be selected easily).

For each row, we create another empty object (called innerObject ), then iterate over its checkboxes. For each checkbox, we add a property to innerObject : the key is the name attribute/property of the checkbox, the value is on or off depending on the checked state. Finally, we get the value of the text input on that row to use as the key in jsonObject , and add the property to it.

Here's a working example of the above code.

Answer 2

将表单序列化为JSON的最简单方法是使用jQuery's serializeArray()

JSON.stringify($('form').serializeArray());

Answer 3

You should build your own JSON string and then use jQuery.parseJSON() to do this loop all your tr elements in the table and collect the information you need.

The below code is a start for you according the html in fiddler.

var strJSON = '';

$("#blacklistgrid tr").each(function (i) { 
    if (i != 0) 
    { 
        var currentRow = $(this)
        strJSON += "{ " + currentRow.find("input[name='shade']").val() +"[{red: currentRow.find("input[name='red']").is(":checked")} ]   }";
    } 
});

var theJSON = jQuery.parseJSON(strJSON);

please check the correct format for JSON string and I could not check the code if it working but you can get the logic here.