hidden input value from php foreach loop not properly passing to JQuery

Question

HTML + PHP :

<?php foreach ($resultpics as $row1){ ?>
<div class="col-md-2">
<a href="#" class="thumbnail" data-popup-open="popup-1"<!-onclick="showImg(<?php //echo $row1['img_id']; ?>-->)">
<input type="hidden" name="imgid" value="<?php echo $row1['img_id']; ?>" id="imgid">
<img id="popimg" src="<?php echo $row1['img_path'];?>/<?php echo $row1['img_id']; ?>.jpg" alt="Pulpit Rock" style="width:200px;height:150px;">  
</a>
</div>  
<?php } ?>

JQuery:

$('[data-popup-open]').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-open');
    $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
    var imgid = $('input[name=imgid]').val();
    alert(imgid);
    $('img#viewimg').attr('src','images/'+imgid+'.jpg');
    e.preventDefault();
});

The problem is the value of

var imgid

is always same(on every different it gives the imgid of first image only). Note that there is no problem in php foreach loop, it fetch's correctly. Thanks

Answer 1

Better approach: Since you're iterating over $resultpics to build HTML, then you need to use classes rather than ids , since duplicate IDs will be inconsistent HTML. Also, since you are using data attributes like data-popup-open make use of jQuery's .data() method, Do it this way:

<?php foreach ($resultpics as $row1) { ?>
    <div class="col-md-2">
        <a href="#" class="thumbnail" data-popup-open="popup-1">
            <input type="hidden" value="<?php echo $row1['img_id']; ?>" class="imgid">
            <img class="popimg" src="<?php echo $row1['img_path']; ?>/<?php echo $row1['img_id']; ?>.jpg">
        </a>
    </div>
<?php } ?>

<script>
    $(".thumbnail").click(function(e){
        e.preventDefault();
        var class_name = $(this).data('popup-open');
        $('[data-popup="' + class_name + '"]').fadeIn(350);
        var imgid = $(this).find('.imgid').val();
        $('img#viewimg').attr('src', 'images/' + imgid + '.jpg');
    });
</script>

Answer 2

Try changing this line in your jquery:

  var imgid = $('input[name=imgid]').val(); // wrong

to:

  var imgid = $(this+' :input').val();

i'd also remove/change the id and name attribute values - as they should be unique

Answer 3

var imgid = $('input[name=imgid]'); returns all the inputs but when you call the val() function it only returns the value of the first item in the array which is always the same in this case.

You should either use a for-loop or add an index to your current foreach loop:

 <?php $index = 0; foreach ($resultpics as $row1) { ?> <div class="col-md-2"> <a href="#" class="thumbnail" data-popup-open="popup-<?php echo $index; ?>" data-index="<?php echo $index; ?>"> <input type="hidden" name="imgid_<?php echo $index; ?>" value="<?php echo $row1['img_id']; ?>"> <img id="popimg" src="<?php echo $row1['img_path'];?>/<?php echo $row1['img_id']; ?>.jpg" alt="Pulpit Rock" style="width:200px;height:150px;"> </a> </div> <?php $index++; } ?> 

Then use the index in the data to retrieve the input field:

 $('[data-popup-open]').on('click', function(e) { var targeted_popup_class = jQuery(this).attr('data-popup-open'); var index = jQuery(this).attr('data-index'); $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350); var imgid = $('input[name=imgid_' + index +']').val(); alert(imgid); $('img#viewimg').attr('src','images/'+imgid+'.jpg'); e.preventDefault(); }); 

Answer 4

the problem is you have multiple input elements having name="imgid". So when you query $('input[name=imgid]') jquery parses all of the DOM and creates an object having 0 to 'n' input tags ( n being the number of elements matching your query ). If you use val() on this object it will always return the value of 0'th element in the object.

Solution:

change this

var imgid = $('input[name=imgid]').val(); 

to this

var imgid = $(this).next().val();