5

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.

Improve this question
3
  • how are you appending to the select? if you are using .innerHTML it will fail in all versions of IE. Commented Aug 19, 2010 at 23:33
  • @scunliffe - he appends the select itself, not to the select. Commented Aug 19, 2010 at 23:33
  • @Matchu ah, true... I misread that... Commented Aug 19, 2010 at 23:34

6 Answers 6

Reset to default
8

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I know I'm late to the party, and it's not completely relevant to the question, but I just ran into this issue today. What helped me was replacing input.value = (declared in code before) with document.getElementById("input-id").value =. I don't know why, but with the second method the value does get updated visually. The first method also updates the value (as seen in the inspector), but doesn't change it visually.
An FYI for people currently looking at this post: Seems odd that this bug might still be present. I'm in Chrome Version 94.0.4606.81 (Official Build) (64-bit) but I believe I'm still seeing the same behavior. If I run document.getElementById('myElement').value = "testvalue" in the console, it runs, when i pull the value and log it in the console it shows "testvalue". But it isn't showing in the "elements" tab in the HTML.
5

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

Improve this answer

5 Comments

agreed. JavaScript has full control to set the value at any time.
@scunliffe: That's not entirely true. I know for sure that you can't change the value of file inputs.
@Mark — I think @scunliffe was talking in the context of fields that Javascript can change at all.
Well that's exactly what this question is about... whether or not it can be changed at all ;) Anyway, I think firebug was deceiving me. Thanks for the answer.
agreed the file input type is special and can not be tinkered with for security reasons... but all other input's should have no issue. I say should as there are ways of shooting yourself in the foot in IE ;-)
4

You can change it as usual:

document.getElementById( 'myinput' ).value = 'Hello';
Improve this answer

Comments

1

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.

Improve this answer

Comments

0

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>
Improve this answer

Comments

0

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>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.