views:

385

answers:

2

I've been trying to set the value of a hidden field in a form using jQuery, but without success.

Here is a sample code that explains the problem. If I keep the input type to "text", it works without any trouble. But, changing the input type to "hidden", doesn't work !

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#texens").val("tinkumaster");
  });
});
</script>
</head>
<body>
<p>Name: <input type="hidden" id="texens" name="user" value="texens" /></p>
<button>Change value for the text field</button>
</body>
</html>

I also tried the following workaround, by setting the input type to "text" and then using a "display:none" style for the input box. But, this also fails ! It seems jQuery has some trouble setting hidden or invisible input fields.

Any ideas? Is there a workaround for this that actually works?

Thanking in anticipation

+4  A: 

:text will fail for a input with a type value of hidden. It's also much more efficient to just use:

$("#texens").val("tinkumaster");

ID attributes should be unique on a web page, make sure yours are as this may contribute to any problems you're having, and specifying a more complicated selector just slows things down and doesn't look as neat.

Example at http://jsbin.com/elovo/edit, using your example code at http://jsbin.com/elovo/2/edit

Andy E
Andy, thanks for the quick response.I actually tried with the "#texens" first, and then with "#input:hidden#texens" and neither of them seemed to work. When I changed the input type in the form from "hidden" to "text", and "#input:hidden:texens" to "#input:text:texens", it worked without any trouble. The "#input:text#texens" was a typo above, and should have been "#input:hidden#texens" or just "#texens" as you have just mentioned.So, it seems that the hidden field's values are not being changed.
texens
@texens: I would suspect the problem lies elsewhere. As you can see from the example I linked to, `val()` works just fine on the hidden input, changing the value from "not changed" to "changed". I've revised the example to include the code you pasted above, with an alert to confirm the value change: http://jsbin.com/elovo/2/edit
Andy E
Andy, Thanks a lot for the example. I ran the code mentioned above and it works exactly as it is supposed to be. And the alert indeed confirms that the value has been changed. I had been opening up the page source using Firefox's "View Page Source" feature. And in the page source, it still shows the old value and not the new value (even for the code in the pastebin mentioned above). But, the alert box confirms the changed value. So, I'm assuming this is a Firefox problem (or am I being too stupid and overlooking something important?).Once again, thanks for your time :)
texens
@texens: no problem. I would suggest using a proper debugging tool, [Firebug](http://getfirebug.com) if you use Firefox, instead of viewing source. The behaviour of "view source" is more or less the same across all browsers, and will show the downloaded, unmodified source code of the page.
Andy E
A: 

Actually, this is an ongoing problem. While Andy is right about the downloaded source, .val(...) and .attr('value',...) don't seem to actually modify the html. I think this is a javascript problem and not a jquery problem. If you had used firebug even you would have had the same question. While it seems that if you submit the form with the modified values it will go through, the html does not change. I ran into this issue trying to create a print preview of the modified form (doing [form].html()) it copies everything okay, including all changes except values changes. Thus, my modal print preview is somewhat useless... my workaround may have to be to 'build' a hidden form containing the values they have added, or generate the preview independently and make each modification the user makes also modify the preview. Both are inoptimal, but unless someone figures out why the value-setting behavior does not change the html (in the DOM i'm assuming) it will have to do.

riverc