CODEWITHSUNDEEP
javascripthtml
Maggi Iggam
Maggi Iggam

Reputation: 692

How to hide an upload file element using javascript?

Its quite wierd . My structure is 

<form name="fm"> 
    <input type="file" name="fl">
    <input type="text" name="st"> 
</form>

Now document.fm.st.hidden=true; works as expected hiding the text box but document.fm.fl.hidden=true; doesnt works , it doesnt hides the file upload element ! Why & how to work around ?

Upvotes: 0

Views: 214

Answers (4)

chriswirz
chriswirz

Reputation: 278

For starters, make sure your script is after your element. The javascript you provided should work as you provided it, but if it doesn't, try the following:

<form name="fm"> 
    <input type="file" name="fl">
    <input type="text" name="st"> 
</form>

<script>
    // hides the element (it will still take up space)
    document.getElementsByName("fl").style.visibility="hidden";

    // hides the element (it does not take up any space)
    document.getElementsByName("fl").style.display="none";
</script>

Upvotes: 0

Vikas Joshi
Vikas Joshi

Reputation: 96

if you want to keep the input's space than apply visibility = "hidden" otherwise display = "none".

get Element by name var inputElements = document.getElementsByName("fl"); This will provide you a list of the elements which have name 'fl'.

Now if you want to hide all the elements, run a loop. For now, it'll provide only an element. var inputElement = inputElements[0];

I would suggest using jQuery if you want to keep using javascript for long.

now hide the element inputElement.style.display = "none";

Upvotes: 0

user5393970
user5393970

Reputation:

It sounds like this might be a case of the script running before the page is completely loaded. If you want to be absolutely sure that the page is loaded before the script runs, you can do something like this:

document.onload = function(){ // if you want it could also be window.onload
    document.fm.st.hidden = true;
    document.fm.fl.hidden = true;
};

Upvotes: 1

Roy2718
Roy2718

Reputation: 121

Cant you just give it an id and use 

document.getElementById('yourID');

other whise maybe you can make a css class for it and use Jquery

.addClass() and .removeClass()

Upvotes: 0

Related Questions