Change value of display:none input?

Question

Is it possible to change the value of an <input type="text"> that has been hidden with a style of display:none? I have some JS that seems to work when the input is <input type="hidden"> but not when it's hidden with display:none. And AFAIK, you can't change an input's type with JS either.

Basically, I want to replace an <input> with a <select>, so I'm trying to hide it and append the <select> element.

---

Take a look at http://jsfiddle.net/5ZHbn/

Inspect the <select> element with firebug. Look at the hidden input beside it. Change the select's value. The hidden input doesn't change. Is Firebug lying to me?

If you uncomment the other lines of code, then it works.

Actually... I'm pretty sure it is a bug in Firebug now. Most other things correctly update, but firebug doesn't show the updated value when I inspect it.

Answer 1

I think it's a Firebug bug.

That's because if i query (via the console) the value of the input-text field it is in fact updated, it's simply that Firebug doesn't reflect the updated value in the html-tab.

In fact, using the dom-tab the new value is there, even if the actual node's value in the html-tab was not updated.

This seems to happen if you use a "normally visible" element (like an input type="text") or similar. If you, instead, use an "normally hidden" element (like an input type="hidden"), Firebug update its value normally.

I think it's a bug in Firebug, that seems to not update an element's value if it is normally visible but now hidden with css: i'm saying specifically this, because an input with type="hidden" and display:none is updated nonetheless, so it's not simply a problem of elements hidden via display:none .

Hope this helps, i'm about to issue this bug to the Firebug guys.

UPDATE: i'm using Firebug 1.8.4 on Firefox 8 on Win Srv 2K3.

Answer 2

Changing a field's value should work as expected, regardless of any CSS styling. The issue is likely elsewhere.

Answer 3

You can change it as usual:

document.getElementById( 'myinput' ).value = 'Hello';