JQuery Select Form Array Name

Question

I have a form that looks like the following:

<input type="text" name="item[101][0][date]" value="2012" />
<input type="text" name="item[101][0][price]" value="10.00" />
<input type="text" name="item[101][0][colour]" value="orange" />
<input type="text" name="item[101][1][date]" value="2013" />
<input type="text" name="item[101][1][price]" value="5.00" />
<input type="text" name="item[101][1][colour]" value="blue" />

And I would like to be able to select the entire array from the first 2 keys and store the whole lot as an array in javascript so I can send it via AJAX to PHP.

I've got this in jQuery at the moment, but it doesn't seem to produce what I'm after.

var products = $('input[name~="item['+itemCode+']['+basketId+']"]');

Where itemCode and basketId and retrieved from a submit button (which is working).

Once I have this array called "products" I know how to serialise it and send it as a post request, I just don't seem to be able to end up with an array such as:

products[101][0][date] = 2012
products[101][0][price] = 10.00
products[101][0][colour] = orange

Or:

products[101][1][date] = 2013
products[101][1][price] = 5.00
products[101][1][colour] = blue

Any help with this would be appreciated!

Thanks!

Konstantin Dinev · Accepted Answer · 2012-09-14 14:58:22Z

2

I would suggest using data-* HTML5 attributes to store data at different holders instead of everything stored in the name. Something like:

<input type="text" data-category="101" data-index="0" data-id="date" value="2012" />

Selection then would be performed the following way:

var input = $('input[data-category=' + category + '][data-index=' + index + '][data-id=' + id + ']');

This also allows you to select all items of the same category easily, or with the same index, etc.

The array would be constructed like:

var products = [];
// Define category, index and id
products[category][index][id] = $('input[data-category=' + category + '][data-index=' + index + '][data-id=' + id + ']').val();

edited Sep 14, 2012 at 14:58

answered Sep 14, 2012 at 14:04

Konstantin Dinev

35k14 gold badges79 silver badges103 bronze badges

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

4 Comments

Schodemeiss Over a year ago

If I use this method, can you give me an example of how I'd select all the inputs based on their data-itemcode and data-basketId in JQuery then?

Konstantin Dinev Over a year ago

I updated the example with how you would select based on the data attributes.

Schodemeiss Over a year ago

Ok. Once I have "input" (or "products" as I've called it). How do I end up with an array as per the last section of my question above? If I attempt an "alert(products[date]);" or "alert(products[101][0][date]);" I don't get any output!

Schodemeiss Over a year ago

I see you've added the part about the products array. I would like iterate through all instances of itemCode and basketId, without me knowing what the 3rd index is. Is there anyway of doing this?

João Silva · Accepted Answer · 2012-09-14 14:03:00Z

0

You are using the attribute contains word selector (name~=value), which does a slightly different thing from what you want:

This selector matches the test string against each word in the attribute value, where a "word" is defined as a string delimited by whitespace. The selector matches if the test string is exactly equal to any of the words.

Use the attribute starts with selector (name^=value):

var products = $('input[name^="item['+itemCode+']['+basketId+']"]');

Either use the attribute contains selector (name*=value):

var products = $('input[name*="item['+itemCode+']['+basketId+']"]');

DEMO.

answered Sep 14, 2012 at 14:03

João Silva

91.8k29 gold badges156 silver badges158 bronze badges

6 Comments

Schodemeiss Over a year ago

That doesn't seem to work at all as per my question (tried with ^ and ~). When I try "alert(products[101][0][date]);" I get nothing at all!

João Silva Over a year ago

@AndyBarlow: You need to take the .val() of each element.

Schodemeiss Over a year ago

Can you give me an example? I really want to end up with just a plain boring javascript array of products selected by their keys.

João Silva Over a year ago

@AndyBarlow: Can't you modify your HTML to use data-* attributes for example? It's not easy and it's very error prone to store a multi-dimensional array in an attribute. I'll put an example, but please consider changing your HTML structure.

Schodemeiss Over a year ago

I can probably change my HTML if I absolutely must. If you could change your demo fiddle to include the method I was intending to use I'd be hugely appreciative.

|

Collectives™ on Stack Overflow

JQuery Select Form Array Name

2 Answers 2

4 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related