Question

I have a HTML as below.
Please tell me how can I retrieve the value ‘task’ array in jQuery.

<div class="column1">
<input class="task_name" type="text" placeholder="Enter task name.." value="" name="task[0][name]">
</div>
<div class="column2">
<select class="task_ppl_required" name="task[0][number]">
    <option selected="selected">1</option>
    <option>2</option>
</select>
<input class="task_id" type="hidden" value="0" name="task[0][guid]">
</div>
<div class="column1">
<input class="task_name" type="text" placeholder="Enter task name.." value="" name="task[2][name]">
</div>
<div class="column2">
<select class="volunteer_task_ppl_required" name="task[2][number]" value="1">
<option selected="selected">1</option>
<option>2</option>
</select>
<input class="task_id" type="hidden" value="0" name="task[2][guid]">
</div>

Answer 1

function getValues(form) {
    var vals = {};
    form.find("[name]").each(function() {
        var names = this.name.split(/[[\]]+/);
        if (names[names.length-1] == "") names.pop();
        var obj = vals;
        for (var i=0; i<names.length-1; i++) {
            if (! (names[i] in obj))
                obj[names[i]] = {};
            obj = obj[names[i]];
        }
        obj[names[i]] = this.value;
    });
    return vals;
}

Instead of .find("[name]") you also could just use .serializeArray(), which might be more exact and allow more inputs. Now, you can

> getValues($myForm).task[0]
{number: "1", guid: "0"}

(Demo at jsfiddle.net, more sophisticated using Array.reduce)