CodeIgniter Forums

Full Version: [Solved] Javascript Change Not Working
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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){

        $('input[id="input-extra-image' + image_row + '"]').val($(this).val());
    });


PHP Code:
var image_row 1;

function 
add_extra_image() {
 
 html '<hr/>';
 
 html += '<div id="image" class="row' image_row '">';
 
 html += '<div class="form-group">';
 
 html += '<label class="col-sm-2" for="input-extra-image">Extra Page Images</label>';
 
 html += '<div class="col-sm-10">';
 
 html += '<div class="img-thumbnail">';
 
 html += '<img src="" alt="" title="" class="img-responsive"/>';
 
 html += '</div>';
 
 html += '<br/>';
 
 html += '<br/>';
 
 html += '<input type="file" id="file-extra-upload' image_row '"/>';
 
 html += '<input type="hidden" name="extra_image[]" value="" id="input-extra-image' image_row '"/>';
 
 html += '</div>';
 
 html += '</div>';
 
 html += '<br/>';
 
 html += '<br/>';
 
 html += '<br/>';
 
 html += '<br/>';
 
 html += '<br/>';
 
 html += '<br/>';
 
 html += '<div class="form-group">';
 
 html += '<label class="col-sm-2"></label>';
 
 html += '<div class="col-sm-10">';
 
 html += '<button type="button" onclick="$(\'.row' image_row '\').remove();" class="btn btn-danger btn-md">Remove Image</button>';
 
 html += '</div>';
 
 html += '</div>';
 
 html += '</div>';
 
 $('#image').append(html);
 
 $('input[id="file-extra-upload' image_row '"]').change(function(e) {
 
   $('input[id="input-extra-image' image_row '"]').val($(this).val());
 
 });

 
 image_row++;


Any Suggestions
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.