Copy browse button's file URL to different text input?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Copy browse button's file URL to different text input?

Post by JAB Creations »

I've successfully created a completely CSS customized mouse/keyboard browse button for uploading files on my site's forum. However I have to have the opacity set to zero to achieve this. That means the file's location can't be seen by the visitor.

What I would like to do is somehow copy the text of the file's location from the ID of the type="file" input and have it update to a input type="text" so visitors can see the location of their file. Since it will be a regular text field I can modify the CSS accordingly. I'm still working on the styling so I'll post all the code for everyone else who is interested when I've cleaned up the variable names and whatnot. :mrgreen:
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: Copy browse button's file URL to different text input?

Post by JellyFish »

In order to accomplish what you want you will need to use javascript.

Code: Select all

 
<input type="file" id="foo" />
<input type="text" id="bar" />
 
<script type="text/javascript">
document.getElementById("foo").onchange = function(){
document.getElementById("bar").value = document.getElementById("foo").value;
}
</script>
 
Post Reply