How to use JQuery to select a hidden form field value that is part of an array of hidden form field values?

Question

I am having trouble selecting a hidden form field value that is a part of an array of hidden form field values having the same name. Here's what one element of the array looks like:

<input data-val="true" data-val-number="The field ProductId must be a number." data-val-required="The ProductId field is required." id="OrderItemViewModels_2__ProductId" name="OrderItemViewModels[2].ProductId" type="hidden" value="3" />

I have tried selecting it several different ways in JQuery, such as:

$('#OrderItemViewModels[2].ProductId').val());

and..

$('#OrderItemViewModels\\[2\\].ProductId').val());

Neither of which worked. I've also tried a few other ways as well. So, I tried some of the suggestions from below, hoping to just print the values in an alert. I tried these:

alert('valueDirect2=' + $('#OrderItemViewModels_2__ProductId')).val();
alert('valueDirect1=' + $('input[name="OrderItemViewModels[2].ProductId"]')).val();

This results in printing valueDirect2=[Object object] in both cases. Why? What is wrong here?

I'm at a loss as to how to get these values. Any help?

Answer 1

Do you need this to be dynamic, ie change on the fly which input field is selected? If so, you'll need to add a variable into the middle of your selector.

If you modify your existing code like this, it'll work:

$('#OrderItemViewModels_2__ProductId').val();

Your two samples didn't work because you're formatting your selector string similar to how the name attribute, but the # prefix tells jQuery to look for an id attribute.

It is possible to select an element by name as well, which would look like this:

$('input[name="OrderItemViewModels[2].ProductId"]').val();

In your alert examples, you're seeing [Object object] because the $ syntax in jQuery is a shortcut for calling the jQuery function. What you're really doing is this:

jQuery('input[name="OrderItemViewModels[2].ProductId"]').val();

It's just a plain old function call. The S is a convenient shorthand. You're calling a function and passing in a string, which is the selector that jQuery will evaluate.

Your selector wasn't returning anything because it was formatted incorrectly, so you were ending up printing the .val() , or value, of the jQuery function itself. It's a little confusing until you have a good conceptual grasp of how jQuery works.

To make your selector dynamic, just splice strings together around the variable that contains the number of the input you want to select:

$('input[name="OrderItemViewModels[' + myVariable + '].ProductId"]').val();

Here's a jsFiddle that illustrates both options.

Answer 2

$('input[name="OrderItemViewModels['+ index +'].ProductId"]').val(); // index = 0,1,2...

要么

$('#OrderItemViewModels_'+ index +'__ProductId').val(); // index = 0,1,2...