populate text field with popup data 1

[derwent]

There is a form for our cms that uploads a story to the DB. They want an image upload, so I am opening a popup window to upload the image.

I want to then pass the filename of the upload back from the popup window to populate the form field in my original page.

Is this possible?

The code on the original is like this

<input type="text" name="product_picture" value=""> <a href="upload.asp">upload image</a>

the popup minus the asp upload scripts:

<form name="frmSend" method="POST" enctype="multipart/form-data" action="upload.asp">
    File 1: <input name=attach1 type=file size=35><br>
    File 2: <input name=attach2 type=file size=35><br>
    File 3: <input name=attach3 type=file size=35><br>
    File 4: <input name=attach4 type=file size=35><br>
    <br> 
    <inputtype=submit value="Upload">
    </form>
<br>
Close window

when they have uploaded the image then click close window, the filename is passed to the input on the first page

thanks

 

[cLFlaVA]

Change your popup script to something like this:

<form name="frmSend">
    File 1: <input name=attach1 type=file size=35><br>
    File 2: <input name=attach2 type=file size=35><br>
    File 3: <input name=attach3 type=file size=35><br>
    File 4: <input name=attach4 type=file size=35><br>
    <br>
    <input type="button" value="Upload" onclick="opener.document.formname.fieldname.value = this.form.attach1.value; return false;">
    </form>

This will make the field named "fieldname" in the form "formname" in the parent window get populated with the value from "attach1".

*cLFlaVA
----------------------------
"Holy crip he's a crapple!

 

[derwent]

Many thanks clflava, it puts the data into the correct field.

Is it possible also to when the user submits the form, it submits the form AND populates the field? I have the code to update the form field on submit

<input type=submit value="Upload" onclick="opener.document.add_form.product_picture.value = this.form.attach1.value; return false;">

 

[derwent]

When the file is uploaded the page then reloads to display the filename of the file uploaded. I tried displaying this in a form field and then a button to put this into the original field but this didn`t work.

The problem when I pass the data directly back to the original form is that all of the file location is passed i.e. c:\my documents\images\myfile.jpg whereas all I want to be passed back to the original is myfile.jpg

is al of this possible?

 

[BillyRayPreachersSon]

Use the JavaScript string method of "lastIndexOf" to help you out here:

var wholePath = 'c:\\my documents\\images\\myfile.jpg';
var filenameOnly = wholePath.substr(wholePath.lastIndexOf('\\') + 1);
alert(filenameOnly);

Hope this helps,
Dan

 

[derwent]

sorry I`m a real dipstick when it comes to javascript, where do I put this code?

 

[BillyRayPreachersSon]

I'm a real dipstick when it comes to psychic code reading, so you'll have to post some of your code before that can be answered exactly.

However - it will most likely be put in your form submission routines (onsubmit event handler).

Hope this helps,
Dan

 

[derwent]

I am now using this that submits my form on the popup and completes the field in the original page

<input type=submit value="Upload" onclick="opener.document.add_form.product_picture.value = this.form.attach1.value; return true;">

unfortunately as it relays back all of the info from the input=file field, it is returning e.g. c:\my documents\my pictures\myimage.gif

is it possible for it to only send back the filename e.g. myimage.gif??

thanks again

 

[BillyRayPreachersSon]

Hi derwent,

If you merge the code you've now got with the middle line of my previous post, it should work as expected. Something like this:

<input type="submit" value="Upload" onclick="(); return(true);" />

and then add the fillForm function to the HEAD section of the file:

<script type="text/javascript">
<!--
	function fillForm() {
		var filename = this.forms['form'].elements['attach1'].value;
		opener.document.forms['add_form'].elements['product_picture'].value = filename.substr(filename.lastIndexOf('\\') + 1);
	}
//-->
</script>

Hope this helps,
Dan

 

[BillyRayPreachersSon]

Hmm - I seem to have cut the function name instead of copying it. The input line should read:

<input type="submit" value="Upload" onclick="fillForm(); return(true);" />

Sorry for the confusion!

Dan

 

[derwent]

Many thanks for this Dan, however nothing is being passed back?!?!

I have put the name of the image upload form into the this.forms area

<script type="text/javascript">
<!--
    function fillForm() {
        var filename = this.forms['frmSend'].elements['attach1'].value;
        opener.document.forms['add_form'].elements['product_picture'].value = filename.substr(filename.lastIndexOf('\\') + 1);
    }
//-->
</script>

and placed it in the head.

 

[BillyRayPreachersSon]

Try putting a few alert statements in to see if the function is being called, and also what the value of filename is:

function fillForm() {
        alert('Getting here!');
        var filename = this.forms['frmSend'].elements['attach1'].value;
        alert('Value of filename is: ' + filename);
        opener.document.forms['add_form'].elements['product_picture'].value = filename.substr(filename.lastIndexOf('\\') + 1);
    }

Dan

 

[derwent]

The Getting here alert box popped up, but not the filename one

 

[BillyRayPreachersSon]

If the second alert is not popping up, then the preceeding line must be causing a JavaScript error.

- Is your form definately named "frmSend"?
- Is your filename box definately within that form?
- Is your filename box definately names "attach1"?

Try running it in Firefox and pop open the JavaScript console - it may well help you with a meaningful error message.

Hope this helps,
Dan

 

[derwent]

Didn`t know about the javascript console )

I ran it and it had this to say

Error: this.forms has no properties

 

[BillyRayPreachersSon]

Aah - that'll be my copy paste code!

"this.forms" should be "document.forms"

Sorry for the mixup!
Dan

 

[derwent]

haha, it works!!!!!

Many thanks BillyRayPreachersSon. I`ve learnt a lot from this thread and will now spend a few days on w3school javascript area when this project is out of the way D

thanks again matey