[Solved] Javascript Change Not Working |
When I select a image after I click on the browse button it adds the file name to the hidden input. It works fine for the first row.
Each row that I create by clicking on button creates it's own id on the file upload input and the hidden input. But I can not get the code below to work with my function Codepen Example Click Here Quote:$('input[id="file-extra-upload' + image_row +'"]').change(function(e){ PHP Code: var image_row = 1; Any Suggestions
There's only one rule - please don't tell anyone to go and read the manual. Sometimes the manual just SUCKS!
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) { 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. |
Welcome Guest, Not a member yet? Register Sign In |