Question

I have the next form:

<form id="form">
<input type="checkbox" name="numbers" value="1">
<select name="ordering[numbers]">
    <option value="ASC">Ascend</option>
    <option value="DESC">Descend</option>
</select><br>
<input type="checkbox" name="added_date" value="1"> Call date 
<select name="ordering[added_date]">
    <option value="ASC">Ascend</option>
    <option value="DESC">Descend</option>
</select>
</form>

Basically I need to save all data to JSON object before submitting form, let’s call it form_json
I’m using jQuery.serializeArray() function

var form_json = $("#form").serializeArray();

I get the next object if both of checkboxes are checked:

[
    {"name": "numbers", "value": "1"},
    {"name": "ordering[numbers]", "value": "ASC"},
    {"name": "added_date","value":"1"},
    {"name": "ordering[added_date]", "value": "ASC"}
]

Which is not what I was expected.
I want to have the next format somehow:

[
    {"name": "numbers","value": "1"},
    {"name": "added_date","value": "1"},
    {"name": "ordering", "value": {
            "numbers": "ASC",
            "added_date": "ASC"}
    }  
]

Is that possible to do that?
Thanks!

Answer 1

I’m not sure if .serializeArray() will create that structure. You’ll have to add the rest of the form in, but this might get you closer.

http://jsfiddle.net/YSEZt/2/

var ordering = {"name" : "ordering", "values" : {}};
ordering.values[$("select[name='ordering[numbers]']").prop('name')] =   $("select[name='ordering[numbers]']").val();    
ordering.values[$("select[name='ordering[added_date]']").prop('name')] =      $("select[name='ordering[added_date]']").val();
console.log(ordering)​