Question

Let’s say for example I have this code:

<input type="file" id="file" name="">
<input class="uploadarea">
<span class="button">Browse</span>

Now I’ve setupped some css to change the default input file button’s look, And now the question is, How do i change .uploadarea‘s value depending on the value of #file when I select a file?

I currently have this code but I don’t know what to do next.

var x = document.getElementsByTagName('input');
inputfile = x[0];
textbox = x[1];

Answer 1

Add an onchange handler to handle the change event on the file event :

<input type="file" id="file" name="" onchange="something(this.value)">
<input id="somethinghere" class="uploadarea">
<span class="button">Browse</span>

function something(val) {
    document.getElementById('somethinghere').value = val;
}

You need to add the id attribute for this to work