Change display value: no input?
Is it possible to change the value <input type="text">that was hidden with the style display:none? I have a JS that seems to work when input <input type="hidden">, but not when it is hidden from display:none. And AFAIK, you cannot change the input type using JS.
Basically, I want to replace <input>with <select>, so I'm trying to hide it and add an element <select>.
Take a look at http://jsfiddle.net/5ZHbn/
Inspect an item <select>with firebug. Look at the hidden entrance next to it. Change the selection value. Hidden input does not change. Is Firebug Me?
If you uncomment other lines of code, then it works.
Actually ... I'm pretty sure that this is now a bug in Firebug. Most other things are updated correctly, but firebug does not show the updated value when I check it.
I think this is a Firebug bug.
This is because if I request (via the console) the value of the input-text field, it is actually updated , just Firebug does not reflect the updated value in the html tab .
In fact, using the dom-tab , a new value appears, even if the actual node value in the html tab has not been updated.
, " " (, = "" ) . " " (, = "" ), Firebug .
, Firebug, , , , , css: , = "" : , , , : none.
, , Firebug.
UPDATE: Firebug 1.8.4 Firefox 8 Win Srv 2K3.
One option you have is to enter an input field inside a div, and then use javascript to modify the contents of the div. For instance:
<html>
<head>
<title>Input Text To Dropdown Box</title>
<script type="text/javascript">
function swap() {
document.getElementById("contentswap").innerHTML = "<select><option value='cats'>Cats</option><option value='dogs'>Dogs</option></select>";
}
</script>
<style>
#contentswap {
display:inline;
}
</style>
</head>
<body
<div id="contentswap">
<input type="text" name="original">
</div>
<br />
<input type="button" value="Input To Select" onClick="swap()">
</body>
</html>