[Solved] Javascript Change Not Working

Hi.

The problem is your change event callback uses global variable image_row.

After you click Add Another Image you build new form elements, append them, create an event listener and increment the image_row. For the first time you click this button you have image_row = 1. And by the end of the add_extra_image() the image_row becomes 2.

So here is the trick, change event callback uses image_row which is a global variable and is now 2. But the html generated is for image_row = 1.

See? You have input[id=file-extra-upload1] element and input[id=input-extra-image1] but when you select an image and callback is called you trying to put value in a input[id=input-extra-image2] which does not exist.

My recommendation is not to rely on a global variable (which is a bad practice, anyway) but try to find required hidden field based on e.g. file input position.

Like this:

Code:

$('input[id="file-extra-upload' + image_row + '"]').change(function(e) {    
   $(this).next().val($(this).val());
});

P.S. My example is only for proof of concept and will break if your change the html, so you should find more appropriate way.

Cheers.