CODEWITHSUNDEEP
javascriptforms
Jürgen Paul
Jürgen Paul

Reputation: 15007

Changing input's value based on another input's value

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

Upvotes: 2

Views: 10746

Answers (3)

Manse
Manse

Reputation: 38147

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

Upvotes: 4

gdoron
gdoron

Reputation: 150253

Simple jQuery code:

$('#file').change(function(){
    $('.uploadarea').val(this.value);
});

pure Javascript:

<input type="file" id="file" onchange="foo()" />
<input class="uploadarea" id="other" />

function foo(){
    document.getElementById('other').value = this.value
}

Upvotes: 0

Den
Den

Reputation: 601

Yes. Use onchange. And by the way read alternate to onchange event in <input type='file' />. There are some problems with JS manipulation after file select.

Upvotes: 0

Related Questions