Create jquery array from input name array

Question

I hope this hasn't been answered somewhere :)

I am using the follwing form input field to allow customers to update the quantity of items in their basket:

<input type="text" name="item_qty[<?php echo $product['product_id']; ?>]" value="<?php echo $product['product_qty']; ?>">

So each item in the basket has an input field as above and there is one submit button to update all product quantities in one go.

My problem is that I cannot work out how to create the required array in jquery to send through ajax using the array in the name element (I want to keep it like this if possible as I want to ensure that the form will work as a normal submit to the PHP file if there is any reason why the jquery can't be initialised).

I have thought that maybe the name should be the key from the basket array but not sure. Can anyone advise of the best way to do this and if it is to keep the input field as it is now, how I get the required data to create an array in jquery please.

Answer 1

So, if I understand you correctly you have some output similar to this?

<input type="text" name="item_qty[0]" value="4">
<input type="text" name="item_qty[1]" value="1">
<input type="text" name="item_qty[2]" value="3">
<input type="text" name="item_qty[3]" value="7">

and you want a result with something like:

[{item_qty[0], 4}, {item_qty[1], 1}, ...]

If this is correct, I've thrown something together in this fiddle: http://jsfiddle.net/N6eBZ/

EDIT: For the associative array, you need to create a JS Object, see this fiddle: http://jsfiddle.net/KyleMuir/N6eBZ/1/

Hope this helps

Answer 2

var obj = {};

`$('input').each(function(index, value){ obj[this.name] = this.value;

});`

Answer 3

I've forked the accepted answer and rewrote it to use $.map(), which may be more appropriate than $.each(). $.map() is intended for this sort of application: building an array from the results of a DOM query:

var results = $('[name^=item]').map(function() {
    var $this = $(this),
        jsObject = {};

    jsObject[$this.attr('name')] = $this.val();
    return jsObject;
}).get();

Here's a Fiddle.

Here's the documentation for $.map