Question

I have one page with two different forms on it. The first form allows a user to upload and email an image file, the second form generates a URL based on the user input.

In order to add the image name to the URL, I need to have a field in the second form that copies the image name from the field in the first form (I’d rather not have to make the user browse for and select the image twice on one page). The best way I’ve found to copy data from one field to another across forms is this jQuery code: http://jsfiddle.net/nA37d/, but it doesn’t work for my purposes. For example it works from text field to text field beautifully, but it doesn’t work from file field to text field, or file field to file field.

Is there a way to grab the value of the file field in form 1 and copy it to any kind of field in form 2? Here is my basic code:

<script type="text/javascript">
$(function(){
    bindGroups();
});

var bindGroups = function() {
    // First copy values
    $("input[name='logotoo']").val($("input[name='logoname']").val());

    // Then bind fields
    $("input[name='logoname']").keyup(function() {
        $("input[name='logotoo']").val($(this).val());
    });
};
</script>


<form action="#..." method="post" enctype="multipart/form-data">
<input type="file" name="logoname" value="1" />
<input type="submit" value="Upload" /></form>


<form name="form2" action="/url/" method="get">
<label>Logo Name</label> <input type="text" name="logotoo" />
<input type="submit" value="Generate URL" /></form>

Thanks for any help you can give!

Answer 1

Just use change() handler for input type file, not keyup:

http://jsfiddle.net/nA37d/169/

 $("input[name='a1']").change(function() {
        $("input[name='b1']").val($(this).val());
    });

For input file to input file, i dont think its possible for security reason.

BTW, this code should be refactorized.