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
– Jürgen Paul, Commented Feb 16, 2012 at 13:27
@user1099531 You can't get the path of a file with the file input element, just the filename. — Niklas
– Niklas, Commented Feb 16, 2012 at 13:30
^nope, But some elements have the same styling as those ones. — Jürgen Paul
– Jürgen Paul, Commented Feb 16, 2012 at 13:36

Manse · Accepted Answer · 2012-02-16 13:47:44Z

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, 2012 at 13:47

answered Feb 16, 2012 at 13:23

Manse

38.1k11 gold badges88 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jürgen Paul Over a year ago

Should I put this in the head or before </body>?

Manse Over a year ago

you can put the script in the <head> as its triggered - ie not relying on the DOM being ready

Jürgen Paul Over a year ago

Weird. The value is undefined.

Jürgen Paul Over a year ago

When I selected a file, the value of somethinghere is now undefined.

Community · Accepted Answer · 2017-05-23 12:09:04Z

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, 2017 at 12:09

CommunityBot

11 silver badge

answered Feb 16, 2012 at 13:25

Den

6013 silver badges10 bronze badges

Comments

gdoron · Accepted Answer · 2012-02-16 13:32:19Z

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, 2012 at 13:32

answered Feb 16, 2012 at 13:22

gdoron

151k59 gold badges302 silver badges376 bronze badges

2 Comments

Jürgen Paul Over a year ago

I'm sorry but this does not include jQuery.

Manse Over a year ago

getElementsByClassName is not fully supported on <= IE8 -> quirksmode.org/dom/w3c_core.html#t11

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related