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 java script 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?
You 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
<input type = "hidden", id = "abbriv", value = "Some Random Text"/>
<script>
function f1()
{
var x = document.getElementById("abbriv").value;
document.getElementById("demo").innerHTML = x;
}
</script>