Clear Upload File Input Field Using JavaScript’s innerHTML

When developing a HTML web form the input field should always be allowed to be cleared by the user. The problem is that there is no default value to erase the contents on the field without using some JavaScript. The easiest way to get or modify the content of an element is by using the innerHTML property.

innerHTML is not a part of the W3C DOM specification. However, it is supported by all major browsers.

Using innerHTML to Clear File Input

Using innerHTML we can change the contents of an HTML element. Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element’s opening and closing tag. By changing an element’s innerHTML after some user interaction, you can make much more interactive pages.

The first step is to place our JavaScript within the of our document.

<script>
function clearFileInputField(tagId) {
    document.getElementById(tagId).innerHTML =
        document.getElementById(tagId).innerHTML;
    }
</script>

Once that is done we simply have to place our reset link HTML within the :

<div id="uploadFile_div">
    <input type="file" class="fieldMoz" id="uploadFile" onkeydown="return false;" size="40" name="uploadFile"/>
</div>
<a onclick="clearFileInputField('uploadFile_div')" href="javascript:noAction();">Clear</a>

VICTORY!

This was a pretty simple example for changing the HTML of an element. You can apply this theory to any field on a form and by manipulating an element’s innerHtml you’ll be able to change your text and HTML as much as you like.


Clear

10 thoughts on “Clear Upload File Input Field Using JavaScript’s innerHTML

  1. Pingback: Moduli, di tutto di più — Studio404 Web Agency

  2. Vidmate is an absolutely free application for watching all kind of videos based on entertainment. Therefore, it surely keeps all the woes related to watching movies and television series away.

  3. Himachal Pradesh Board of Secondary Education (HPBOSE) results are to be declared on May 2018 and here are the complete updates about it. Continue to read this post on result to get all the latest information. Let us at first know about the board, the 10th exam organized by the board, results of that exam, previous stats, where and how to check the result and all the related information here.

  4. Apple is getting ready for the launch of iOS 12 beta for developers. If you are interested in downloading/installing iOS 12 beta on iPhone or iPad device. It is now time to prepare for the rollout of iOS 12 update for your devices.

Leave a Reply

Your email address will not be published. Required fields are marked *