jquery selector can't read from hidden field

Question

(answers aggregated into another question)

The following jquery 1.3.2 code works:

<input type="select" value="236434" id="ixd" name='ixd' />

<script>
console.log( $('#ixd') );
console.log( $("input[name='ixd']") );
</script>

Console shows:

[input#ixd 236434]

[input#ixd 236434]

However setting the input to "hidden" prevents the selectors working. Any clues?

<input type="hidden" value="236434" id="ixd" name='ixd' />

<script>
console.log( $('#ixd') );
console.log( $("input[name='ixd']") );
</script>

Console shows:

[]

[]

Answer 1

Not sure why that would be failing. I do the same thing at work on a regular basis, and it works regardless of the formfield being hidden or not.

Perhaps try this:

<input type="hidden" value="236434" id="ixd" name='ixd' />

<script>
    console.log($("#xid").val())
</script>

That will get you the value of the hidden field. To get the value out of a form field, the .val() method needs to be used.

Answer 2

<input type="select" value="236434" id="ixd" name='ixd' />

Is that even valid markup?

It appears that selecting a visible input retrieves the value of it, even without explicity calling .val(), whereas selecting a hidden one does not:

Try:

console.log( $('#ixd').val() );
console.log( $("input[name='ixd'][type='hidden']") );

and

console.log( $("input[name='ixd']").val() );

Answer 3

This may be more of an issue with the console. I ran a test and it seems to still grab the instance of the element. I can't exactly tell what you are trying to do here.

If you are just trying to validate wether the object was found check the length property

console.log( $('#xid').length );

If you are trying to get the value of the field then use the val method

console.log( $('#xid').val() );

Finally, its possible that in your solution the DOM hasn't fully loaded yet. Make sure you are wrapping your logic inside a document.ready call.

$(document).ready(function() {
    console.log( $('#xid').val() );
});

Answer 4

If you're doing this in ASP.Net, check the ID of your control at runtime via the View Source option in your browser. You might find that your control ID isn't what you expect it to be if, for example, your control is declared in a content page. In this case it would be assigned an ID that's driven by its master page. Rather than hard-coding the ID in your jQuery you can refer to its ClientID property using ASP.Net inline syntax which will also protect you from any changes in the master or content page control hierarchy.

So...

$('#<%= myHiddenControl.ClientID %>').val();

...would be a better choice than ...

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

...although they would both work.

Answer 5

I had problem where doing $('#field_id').val() didn't return any value because the hidden fields were nested (body > div > form > ul > li > p). Moving it out of ul solved the problem.

Answer 6

If none of the above work try

$('#xid').attr('value');