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, i.e. 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.