JQuery and hidden fields

Question

Hello,

I need to create a hidden field on my page, store some value in it and read that value later. If i create a regular text input and read its value using jquery, i get the correct value. But if i create a hidden input field,populate it with some text and read its value using jquery i get null.

example:

Suppose the following input text box contains the value "Foo".

<input type="text" id="inputfield"> </input>

Now, if i do $("#inputfield").val(), i correctly get "Foo"

But, if i change the type to "hidden", and set the value of field, using $("#inputfield").val("Foo") then try to read the value using $("#inputfield").val(), it returns "".

Can someone please tell me why this happens and any way to fix this ?

Thank You.

Answer 1

The following worked as expected:

alert( $("input#fooBox").val() ); // alert default value
$("input#fooBox").val("end test"); // change value
alert( $("input#fooBox").val() ); // alert new value

<input type="hidden" id="fooBox" value="hello world" />

Answer 2

Not reproducible. Provide more code / html / context information / error messages.

Check here for a correctly working example http://jsbin.com/utunu3/ (http://jsbin.com/utunu3/edit for the code)

<input type="hidden" id="inputfield"> </input>
alert($("input#inputfield").val());
$("input#inputfield").val("foo");
alert($("input#inputfield").val());

alerts first an empty string then foo.

Answer 3

Hidden fields or other type of input fields should behave the same. Maybe you have another error somewhere.

Answer 4

You don’t write type="hidden", you either make it invisible by assigning the CSS statement display: none or hide it using jQuery’s $(element).hide(); or .fadeOut(). If you were storing something that is never to be seen by the user, global variables do a good job.