Copy File Value to Text Value

chunk1978

hi there... i'd like to know if it's possible to copy a selected file's name (value?) and insert it into a basic text field thru an onchange event handler...

here is my code:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Untitled Document</title>
 
<script type="text/javascript">
 
function Copy()

    {

    document.getElementById('textfield').value = document.getElementById('filefield').value

}

</script>
 
</head>
 
<body>

<p>

  <input type="file" name="filefield" id="filefield" onchange="Copy();">

</p>

<p>

  <input type="text" name="textfield" id="textfield">

</p>

</body>

</html>

chunk1978

i forgot to mention: this works fine, but what i'm trying to do is just copy the file's name, instead of copying the entire address of the file...

any ideas?

acoder

Your code works absolutely fine in Firefox.

chunk1978

Quote:

Originally Posted by acoder

Your code works absolutely fine in Firefox.

hey acoder... yeah, i forgot to add what i was really trying to do... which is to copy the file's name only instead of the entire address of the file...

perhaps there's some insane code that could read the file, and copy only the text that's after the last "/" of the file's address? but i have zero ideas...

acoder

Yes, I missed your second post.

Use the string methods, in particular, lastIndexOf and substring.

chunk1978

Quote:

Originally Posted by acoder

Yes, I missed your second post.

Use the string methods, in particular, lastIndexOf and substring.

thanks for the advice... but i'm finding it a little difficult wrapping my head around how i could use these to do what i'd like... would i use lastIndexOf with substring? or...

???

chunk1978

after searching/attempting for hours, this is the best i can come up with that makes any sense to me... but it doesn't work... :-/

Expand|Select|Wrap|Line Numbers

 
function Copy()

    {

    document.getElementById('textfield').value = document.getElementById('filefield').value;

    document.getElementById('textfield').value.substring(lastIndexOf('/') + 1);

}

acoder

Quote:

Originally Posted by chunk1978

after searching/attempting for hours, this is the best i can come up with that makes any sense to me... but it doesn't work... :-/

You're almost there, just one correction:

Expand|Select|Wrap|Line Numbers

 
function Copy()

    {

    var fileVal = document.getElementById('filefield').value;

    document.getElementById('textfield').value = fileVal.substring(fileVal.lastIndexOf('/') + 1);

}

You forgot the string object - lastIndexOf is a method of the String object.

chunk1978

Quote:

Originally Posted by acoder

You're almost there, just one correction:

Expand|Select|Wrap|Line Numbers

 
function Copy()

    {

    var fileVal = document.getElementById('filefield').value;

    document.getElementById('textfield').value = fileVal.substring(fileVal.lastIndexOf('/') + 1);

}

You forgot the string object - lastIndexOf is a method of the String object.

oh sweet, yeah ok it's makes more sense now... thanks once again acoder!

chunk1978

i would like to note (for future references) that while implementing this discussions' code in my script, i came across an unexpected problem...

this code's onChange event handler will not fire if the file field attached to the onChange handler loads as a default style="display:none;" ... therefore it was necessary to choose a different placement for the onChange handler...

strange but true ;-)

acoder

Quote:

Originally Posted by chunk1978

oh sweet, yeah ok it's makes more sense now... thanks once again acoder!

You're welcome.

btw, congratulations on becoming a senior member!

acoder

Quote:

Originally Posted by chunk1978

i would like to note (for future references) that while implementing this discussions' code in my script, i came across an unexpected problem...

this code's onChange event handler will not fire if the file field attached to the onChange handler loads as a default style="display:none;" ... therefore it was necessary to choose a different placement for the onChange handler...

strange but true ;-)

So you mean that if it was hidden by default, but then later becomes visible, when a change occurs the onchange event does not fire?

chunk1978

Quote:

Originally Posted by acoder

So you mean that if it was hidden by default, but then later becomes visible, when a change occurs the onchange event does not fire?

yeah, weird hey? it took me forever trying to figure out what was wrong...

Copy File Value to Text Value

re: Copy File Value to Text Value

re: Copy File Value to Text Value

re: Copy File Value to Text Value

re: Copy File Value to Text Value

re: Copy File Value to Text Value

re: Copy File Value to Text Value

re: Copy File Value to Text Value

re: Copy File Value to Text Value

re: Copy File Value to Text Value

re: Copy File Value to Text Value

re: Copy File Value to Text Value

re: Copy File Value to Text Value

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about