Make HTML hidden input visible

Question

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?

You have to change the value to "valid input", otherwise it's still invalid ? — adeneo
– adeneo, Commented Jul 14, 2013 at 11:06

Lekhnath · Accepted Answer · 2013-07-14 11:25:00Z

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.

edited Jul 14, 2013 at 11:25

answered Jul 14, 2013 at 11:05

Lekhnath

4,6456 gold badges39 silver badges66 bronze badges

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

2 Comments

kona Over a year ago

I tried it and indeed it makes the text visible. but the visibility stays for milliseconds and it goes back to invisible mode.

Lekhnath Over a year ago

use this code after some events occures on some element , like button click or someting else.

Community · Accepted Answer · 2017-05-23 12:00:31Z

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

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Jul 14, 2013 at 11:09

ebram khalil

8,3197 gold badges45 silver badges60 bronze badges

Collectives™ on Stack Overflow

Make HTML hidden input visible

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related