14

(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:

[]

[]

Community
  • 1
  • 1
Andy
  • 17,423
  • 9
  • 52
  • 69

6 Answers6

27

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.

Mike Trpcic
  • 25,305
  • 8
  • 78
  • 114
  • 2
    +1: He should be using .val() to retrieve the value of the field. – Jon Tackabury Jun 15 '09 at 15:30
  • 2
    Tried that, I was trying to point out that the selectors were not functioning rather than use the output :) – Andy Jun 15 '09 at 15:50
  • Sorry, I have no idea then. I use jQuery with hidden fields all the time with no issues. – Jon Tackabury Jun 15 '09 at 17:27
  • It appears it's a firebug bug of some description, thanks for your prompt reply :) http://stackoverflow.com/questions/997296/jquery-hidden-field-not-accessible-until-document-ready-called/997371#997371 – Andy Jun 15 '09 at 18:45
  • 1
    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! – CrayonViolent Oct 18 '10 at 22:55
  • @CrayonViolent Could you please convert to answer? This was all that was correct for me in Chrome. –  Nov 11 '12 at 21:08
9
<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() );
karim79
  • 339,989
  • 67
  • 413
  • 406
2

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() );
});
bendewey
  • 39,709
  • 13
  • 100
  • 125
  • Many thanks, this is the solution - but why does this not work in this instance when the – Andy Jun 15 '09 at 15:50
  • @Andy, I don't know, I wonder if that's the case with all browsers? – bendewey Jun 15 '09 at 19:19
  • 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). – CrayonViolent Oct 18 '10 at 22:52
  • my $('#xid').length = 1, what does 1 mean? – shintaroid Jul 24 '19 at 09:29
1

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.

JTIsALeaf
  • 23
  • 7
0

If none of the above work try

$('#xid').attr('value');
Ryan Soury
  • 11
0

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.

Lenart
  • 3,101
  • 1
  • 26
  • 28