Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 287
kona Avatar asked Jul 14 '13 11:07

kona


People also ask

How do you make a hidden field visible in HTML?

Hidden inputs are completely invisible in the rendered page, and there is no way to make it visible in the page's content. A string representing the value of the hidden data you want to pass back to the server.

How do you pass an input hidden array?

If you want to post an array you must use another notation: foreach ($postvalue as $value){ <input type="hidden" name="result[]" value="$value."> }

Are hidden inputs safe?

Since they are not rendered visible, hidden inputs are sometimes erroneously perceived as safe. But similar to session cookies, hidden form inputs store the software's state information client-side, instead of server-side. This makes it vulnerable.


2 Answers

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.

like image 82
Lekhnath Avatar answered Oct 03 '22 19:10

Lekhnath


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

like image 40
ebram khalil Avatar answered Oct 03 '22 19:10

ebram khalil