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. I'm not terribly familiar with jQuery, but perhaps it won't retrieve DOM elements that aren't supposed to be visible?

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

Answer 3

<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 4

/*

Jquery seems to miss the hidden input from the standard :input selector. Note the other bit of code:

$("input[type=hidden]").each( function() { stringX += $(this).attr('name') + "=" + escape($(this).attr('value')) + "&"; });

The function below makes it easy to post all input fields via ajax. Radio button support is missing in the function below. I'll probably post an update to this function soon to cater for full post support. Contact me at http://www.ionicdata.com should you like to be notified once this function is complete. */

function inputToSubmit() { var stringX = ''; //process all enabled input $(":input:enabled").each( function() {

 switch ($(this).attr('type'))
 {
  case 'submit':

  break;
  case 'button':

  break;

  default:
        stringX += $(this).attr('name') + "=" + escape($(this).attr('value')) + "&";
  break;

 }


});

//jquery does not seem to find hidden input.
$("input[type=hidden]").each( function() {
   stringX += $(this).attr('name') + "=" + escape($(this).attr('value')) + "&";
});


return (stringX);

}