Question

I am retrieving 9 image thumbnails from a database, each resides in its own div like so:

<div class="post">

<div class="post_desc"></div>
<div class="post_title"></div>
<a href="#" class="linktopost">**<img src="img/thumb.png" class="thumb-img"/>**</a>
<form>
**<input type="hidden" class="postid" value="'.$post_id.'" />**
</form>

</div>

Using Jquery I am trying to post the value that is in the hidden input field when the thumbnail is clicked but I am struggling to select it correctly. The value in the input changes with each of the 9 images.

This is how far I have got with the Jquery:

$(".thumb-img").click(function(){

    $.post("inc/fullpost.php", {postid: ##########.val()},
        function(output){
            $("#gotpostid").html(output).show();
        }).fail(function(x,y,z){ 
            $("#gotpostid").html(x + "<br />" + y + "<br />" + z)
        });

});

So how do I correctly select the value in the input field that resides in the same containing class as the image thumbnail?

Answer 1

You can use data instead of hidden elements. Remove hidden element,and try like this:

Markup:

<img src="img/thumb.png" class="thumb-img" data-postid="'.$post_id.'"/>

Script:

$(".thumb-img").click(function(){
    $.post("inc/fullpost.php", {postid: $(this).data('postid')},function(output){
            $("#gotpostid").html(output).show();
        }).fail(function(x,y,z){ 
            $("#gotpostid").html(x + "<br />" + y + "<br />" + z)
        });
});