CODEWITHSUNDEEP
javascripthtml
mapek
mapek

Reputation: 270

Change input from hidden to file

I have a problem with changing type of input in javascript. When I change from hidden to text is ok and is proper displayed but when I change to file input isn't showing.

<script type="text/javascript">
  function show(x,y) {
    if (document.getElementById(y).checked) {
        document.getElementById(x).setAttribute('type', 'file');
    } else {
        document.getElementById(x).setAttribute('type', 'hidden');
    }

}
</script>

Upvotes: 1

Views: 252

Answers (3)

alessandrio
alessandrio

Reputation: 4370

/*JQUERY
function show(x,y){
$(y).change(function() {
    $("#txtAge").text(this.checked);
    if(this.checked) $(x).attr('type','text')
    else $(x).attr('type','file');
});
}
show('#a','#isAgeSelected');*/
//JAVASCRIPT
function show(x,y,z){
var typedefault=document.getElementById(x).type;
document.getElementById(y).onchange=function(){
    document.getElementById('txtAge').innerText=this.checked;
    if(this.checked){
        document.getElementById(x).type = z;
    } else {
       document.getElementById(x).setAttribute('type',typedefault);
    }
};
}
show('a','isAgeSelecteda','text');
show('b','isAgeSelectedb','text');
show('c','isAgeSelectedc','file');

/*
function supportsFileInput() {
  var dummy = document.createElement("input");
  dummy.setAttribute("type", "file");
  return dummy.disabled === false;
}
alert(supportsFileInput());
*/
<input id="isAgeSelecteda" type="checkbox">
<input id="isAgeSelectedb" type="checkbox">
<input id="isAgeSelectedc" type="checkbox">
<p id="txtAge"></p>
<input type="hidden" id="a">
<input type="file" id="b">
<input type="hidden" id="c">

Upvotes: 2

Anujith
Anujith

Reputation: 9370

Try this: 

function show(x, y) {
    if (document.getElementById(y).checked) {
        document.getElementById(x).type = 'text';
    } else {
        document.getElementById(x).type = 'file';
    }
}

Fiddle1

function show(x, y) {
    if (document.getElementById(y).checked) {
        document.getElementById(x).type = 'text';
    } else {
        document.getElementById(x).type = 'hidden';
    }
}

Fiddle2

Fiddle3

Upvotes: 1

Divakar Gujjala
Divakar Gujjala

Reputation: 803

Below code should work.

Javascript code

document.getElementById(selector).setAttribute("type","file");

jQuery Code

$(selector).attr('type', 'file');

Sample code

HTML

<input type="checkbox" id="chkTest"  onclick="myFunction()">
<input type="hidden" id="hdnFld" />

Java script

function myFunction() { 
    if(document.getElementById("chkTest").checked)   { 
        document.getElementById("hdnFld").setAttribute("type","text");
    } else{
        document.getElementById("hdnFld").setAttribute("type","file");
    }                               
}

Upvotes: 1

Related Questions