7

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?

simhumileco
  • 31,877
  • 16
  • 137
  • 115
kona
  • 143
  • 1
  • 3
  • 8

2 Answers2

6

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.

Lekhnath
  • 4,532
  • 6
  • 36
  • 62
  • I tried it and indeed it makes the text visible. but the visibility stays for milliseconds and it goes back to invisible mode. – kona Jul 14 '13 at 11:12
  • use this code after some events occures on some element , like button click or someting else. – Lekhnath Jul 14 '13 at 11:13
2

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

Community
  • 1
  • 1
ebram khalil
  • 8,252
  • 7
  • 42
  • 60