javascript - How to copy a value from one form's file upload field to another form's text field? - Stack Overflo

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: /, 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!

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/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!

• javascript
• jquery
• forms

Share Follow asked Jan 21, 2013 at 18:22 user1997781user1997781 1,92322 gold badges1414 silver badges1717 bronze badges 1

• This will work if you are typing into the field. You may want to add a change event to catch when the file field is updated by a file chooser dialog. – mccannf Commented Jan 21, 2013 at 18:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

http://jsfiddle/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.

If you want to copy a file from one file input field to another you can use the code below:

<script>
    $(".upload-image").click(function () {
        const imageField1 = document.getElementById('id_image_field_1');
        const imageField2 = document.getElementById('id_image_field_2');

        const selectedFile = imageField1.files[0]; // Retrieve the selected file
        const fileList = new DataTransfer(); // Create a new FileList object and add the selected file to it
        fileList.items.add(selectedFile);

        // Assign the new FileList to the main page image field
        imageField2.files = fileList.files;
    });
</script>

<button type="submit" class="btn btn-primary upload-image">Save</button>

I use this snippet with bootstrap, where I have a modal to select & crop a picture. When done, the modal closes and the file is copied to imageField2, which is on the main page and part of the form. This form gets sent to the django view. imageField2 is a hidden image field.