I want to change an invisible HTML input in to visible when I click a button as shown below.
My HTML line that create the hidden input is:
<input type="hidden" id="txtHiddenUname" value="invalid input" />
my JavaScript for changing the visibility is:
var y = document.getElementById("txtHiddenUname");
y.style.display= "inline";
But this couldn't make the hidden element to be visible.
Any ideas?
I want to change an invisible HTML input in to visible when I click a button as shown below.
My HTML line that create the hidden input is:
<input type="hidden" id="txtHiddenUname" value="invalid input" />
my JavaScript for changing the visibility is:
var y = document.getElementById("txtHiddenUname");
y.style.display= "inline";
But this couldn't make the hidden element to be visible.
Any ideas?
Share Improve this question edited Apr 2, 2020 at 16:54 simhumileco 34.6k17 gold badges147 silver badges123 bronze badges asked Jul 14, 2013 at 11:03 konakona 1431 gold badge3 silver badges8 bronze badges 1- You have to change the value to "valid input", otherwise it's still invalid ? – adeneo Commented Jul 14, 2013 at 11:06
2 Answers
Reset to default 6You should change the type of input element as :
y.setAttribute('type','text');
//or
y.type = 'text';
1) Either user java script inside body tag as below :
<input type="hidden" id="txtHiddenUname" value="invalid input" />
<script type="text/javascript">
var y = document.getElementById("txtHiddenUname");
y.type= "text";
</script>
OR
2) Use some event handler such as onload
<head>
<script type="text/javascript">
function on_load(){
var y = document.getElementById("txtHiddenUname");
y.type= "text";
}
</script>
</head>
<body onload = "on_load()">
<input type="hidden" id="txtHiddenUname" value="invalid input" />
...
so that the DOM is ready.
Here is not matter of CSS it's matter of attributes, So you need to change the attribute type from hidden to something else like text
Kindly check this [how-to-change-html-object-element-data-attribute-value-in-javascript][1]
check this: How to change HTML Object element data attribute value in javascript. To change the attribute value using jQuery or Javascript