如何使用javascript隐藏上传文件元素？

Question

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 ?

Answer 1

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;
};

Answer 2

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()

Answer 3

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";

Answer 4

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>