+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: [Solved] Javascript Change Not Working (/showthread.php?tid=61793)
[Solved] Javascript Change Not Working - wolfgang1983 - 05-18-2015
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
RE: Javascript Change Not Working - codinghamster - 05-18-2015
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.