Change value of display:none input?
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开发者_JAVA技巧'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.
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.
Changing a field's value should work as expected, regardless of any CSS styling. The issue is likely elsewhere.
You can change it as usual:
document.getElementById( 'myinput' ).value = 'Hello';
I got this problem when customizing a magento custom option field, I made some rules from some custom select inputs and needed to save the final value to a hidden custom option text field. For some reason, it didn't work if the field was 'display:none' (maybe due some magento's js?), but it worked when I changed to "visibility: hidden;"
I know my answer is to especific, I tried to make a comment but don't have enough reputation. Hope it helps someone.
One option you have is putting the input box inside a div and then using javascript to change the contents of the div. For example:
<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>
To make changes visible, you can set the value by SetAttribute
var inputs = document.querySelectorAll('input');
var select = document.querySelector('select');
select.onchange = function () {
inputs[0].value = select.value;
inputs[1].setAttribute('value', select.value);
console.log('changed by input.value: ', inputs[0]);
console.log('changed by input.setAttribute: ', inputs[1]);
};<input type="text" style="display: none;" value="">
<input type="text" style="display: none;" value="">
<select>
<option>Select value</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
加载中,请稍侯......
精彩评论