CODEWITHSUNDEEP
javascripthtmlvisibility
kona
kona

Reputation: 143

Make HTML hidden input visible

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?

Upvotes: 7

Views: 56784

Answers (2)

Lekhnath
Lekhnath

Reputation: 4635

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.

Upvotes: 6

ebram khalil
ebram khalil

Reputation: 8331

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

Upvotes: 2

Related Questions