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

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

I want to use the filepath in the `input[type=file]` as the value of the input with a class `uploadarea`. — Jürgen Paul, Feb 16 '12 at 13:27
@user1099531 You can't get the path of a file with the file input element, just the filename. — Niklas, Feb 16 '12 at 13:30
^nope, But some elements have the same styling as those ones. — Jürgen Paul, Feb 16 '12 at 13:36
Then to make this easier you really need to add an ID to the input you want to set the value of - cross browser support for getting elements based on class is not good ... unless you use something like jQuery ... — Manse, Feb 16 '12 at 13:40

Manse · Accepted Answer · 2012-02-16T13:47:44.923

4

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

edited Feb 16 '12 at 13:47

answered Feb 16 '12 at 13:23

Manse

37,765
10
83
108

Should I put this in the head or before `
`?
– Jürgen Paul Feb 16 '12 at 13:38
you can put the script in the as its triggered - ie not relying on the DOM being ready – Manse Feb 16 '12 at 13:38
Weird. The value is `undefined`. – Jürgen Paul Feb 16 '12 at 13:41
When I selected a file, the value of `somethinghere` is now `undefined`. – Jürgen Paul Feb 16 '12 at 13:44

gdoron · Answer 2 · 2012-02-16T13:32:19.237

0

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
}

edited Feb 16 '12 at 13:32

answered Feb 16 '12 at 13:22

gdoron

147,333
58
291
367

I'm sorry but this does not include jQuery. – Jürgen Paul Feb 16 '12 at 13:25
`getElementsByClassName` is not fully supported on <= IE8 -> http://www.quirksmode.org/dom/w3c_core.html#t11 – Manse Feb 16 '12 at 13:29

score 0 · Answer 3 · edited May 23 '17 at 12:09

0

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.

edited May 23 '17 at 12:09

Community

1
1

answered Feb 16 '12 at 13:25

Den

601
3
10

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

3 Answers3