• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Solved] Javascript Change Not Working

#1
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
There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!
Reply

#2
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.
Reply


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2020 MyBB Group.