How to retrieve array of value by name using jQuery?

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>

how is anyone to guess what i"task array" is when virtually all elements of form have "task" in them. — charlietfl
– charlietfl, Commented Oct 14, 2012 at 13:21
so do Bergi's demos do what you want? If not...you need to be concise about what format you want — charlietfl
– charlietfl, Commented Oct 14, 2012 at 14:15

Bergi · Accepted Answer · 2012-10-14 13:49:22Z

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)

edited Oct 14, 2012 at 13:49

answered Oct 14, 2012 at 13:22

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kumiau · Accepted Answer · 2012-10-14 13:29:51Z

1

The array aproximation works well in PHP, where you receive the form values on the $_POST variable and if the syntax match (as yours in the example) he would construct an array with the elements.

You could use jQuery serializeArray. From the site:

The .serializeArray() method creates a JavaScript array of objects, ready to be encoded as a JSON string. It operates on a jQuery object representing a set of form elements.

answered Oct 14, 2012 at 13:29

kumiau

7343 silver badges17 bronze badges

1 Comment

Bergi Over a year ago

It's more than only serializeArray, see this fiddle from my answer

charlietfl · Accepted Answer · 2012-10-14 13:38:21Z

1

If you want all the values of form in order to send to server you can simply use jQuery serialize() method

var formVals= $('##myForm').serialize();

This gets sent to server using jQuery AJAX in folloing manner:

$.post( url, formVals, function(){/* success code*/});

Reference: http://api.jquery.com/serialize/

answered Oct 14, 2012 at 13:38

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

How to retrieve array of value by name using jQuery?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related