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:

[]

[]

Howl

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.

Cleaner

+1: He should be using .val() to retrieve the value of the field. – Make

Tried that, I was trying to point out that the selectors were not functioning rather than use the output :) – Howl

Sorry, I have no idea then. I use jQuery with hidden fields all the time with no issues. – Make

It appears it's a firebug bug of some description, thanks for your prompt reply :) #997796 – Howl

I just encountered a similar problem and .val() did not work for me. document wasn't loading fast enough for it, had to wrap a document.ready around it to work (which was not an option). However, .attr('value') worked w/out being wrapped in document.ready, so +1 that this may work but +1 to .attr('value') too. IOW to other people in same boat, try the different ways listed in the answers! – Oke

@Oke Could you please convert to answer? This was all that was correct for me in Chrome. – Rochkind

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() );

Lunar

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() );
});

Mattos

Many thanks, this is the solution - but why does this not work in this instance when the <script> tags are below the element "declaration"? Usually this sort of operation doesn't require $(document).ready - why would it only be necessary when the input is hidden? – Howl

@Andy, I don't know, I wonder if that's the case with all browsers? – Mattos

sorry for necroing but I just now dealt with a similar problem. Turns out that the document wasn't loading fast enough for there to be a value in the hidden field, and using document.ready solved it (and this was only happening in firefox...seemed to work just fine in IE and chrome...). But document.ready was not an option for me, so I wanted to also point out that using .attr('value') may indeed work instead of .val(). For some reason it worked for me whereas .val() did not (unless it was wrapped in document.ready, of course). – Oke

my $('#xid').length = 1, what does 1 mean? – Giacometti

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.

Idonah

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.

Klagenfurt

Answer 6

If none of the above work try

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

Bijou