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

You cant use id attribute in foreach without any unique number. it will generate same id for all hidden fields. — Mr. Engineer
– Mr. Engineer, Commented Feb 8, 2016 at 14:08
I do have a question. In your last jQuery line, you are replacing the src of the <img id='viewimg'> element. However, you are replacing it with the image's ID, and not with the image's path. Is that what you want? — CodeGodie
– CodeGodie, Commented Feb 8, 2016 at 14:23

CodeGodie · Accepted Answer · 2016-02-08 14:28:38Z

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>

edited Feb 8, 2016 at 14:28

answered Feb 8, 2016 at 14:19

CodeGodie

12.2k6 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ThinkTank Over a year ago

I would do the same. And I think it's possible to simplify with : var imgpath = $(this).find('img').prop('src'); then just do $('img#viewimg').attr('src', imgpath); . This way, you can remove the input type="hidden" because it become useless.

CodeGodie Over a year ago

I thought so too. I asked this on my comment above, on the OP's question.. Guess it depends exactly what they need, but I get what you mean.

ArJ · Accepted Answer · 2016-02-08 14:43:09Z

0

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();

answered Feb 8, 2016 at 14:43

ArJ

3955 silver badges14 bronze badges

Comments

MistaJase · Accepted Answer · 2016-02-08 14:11:44Z

0

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

answered Feb 8, 2016 at 14:11

MistaJase

8597 silver badges12 bronze badges

5 Comments

Imran Aslam Over a year ago

not working. In your code, there is no mentioning of name or id of input element

MistaJase Over a year ago

you can select anything by anything in js - it doesnt have to have an name or id

Imran Aslam Over a year ago

what if i have multiple hidden values in same page, same scope

Imran Aslam Over a year ago

'var imgid = $(this).find('input:hidden').val();' this worked for me ! thanks for your help and i still have that question of multiple hidden values

MistaJase Over a year ago

Then give them a class!

farooq · Accepted Answer · 2016-02-08 14:28:52Z

0

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();
});

edited Feb 8, 2016 at 14:28

answered Feb 8, 2016 at 14:23

farooq

4894 silver badges14 bronze badges

1 Comment

ThinkTank Over a year ago

Carefull, your $index is not incremented.

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related