Question

I am building a code which displays user information on search. User information, is then displayed in a fieldset, and a image, first name, last name and few profile info. is shown, and in the bottom of the fieldset, there’s a add as friend hyperlink:

<a href="#" id="aaf">add as friend</a>

Now I want to use jquery $post() method to interact with another page. I also have a hidden field inside that user fieldset which has the user id value. Now, when i create a click functionality using jquery, i am not able to access the different hidden field values. Now i want to know how to achieve this functionality? For checking if i can get the value of hidden fields inside a set of code, i did this.

$(document).ready(function () {
    $("a#aaf").bind('click', function () {
        alert($("#uid").val());
    });
});

But I’m only getting the value of first fieldset, not others. Kindly guide me in this.

EDIT: How to get it in each tag click event? I’m putting some more code here,

<?php foreach($query->result() as $row){?>
<fieldset>
    <legend>
        <?php echo $row->firstname.' '.$row->lastname;?>
    </legend>
    <img src='<?php echo $row->profile_img_url;?>'/><br>
    <a href="#" id="aaf">add as friend</a>
    <input name="uid" type="hidden" value='<?php echo $row->uid;?>' id="uid">
</fieldset>

Answer 1

<a href="javascript:void(0)" class="aaf" id="users_id">add as a friend</a>

on jquery

$('.aaf').on("click",function(){
  var usersid =  $(this).attr("id");
  //post code
})

//other method is to use the data attribute

<a href="javascript:void(0)" class="aaf" data-id="102" data-username="sample_username">add as a friend</a>

on jquery

$('.aaf').on("click",function(){
    var usersid =  $(this).data("id");
    var username = $(this).data("username");
})