How to pass variable between html tag, javascript and php [closed]

Question

I have several divs, which are made automatically by php script. Each div have and record from mysql database in it. And hidden input with value of unique ID. What I wan't to do is when I click on each of this divs, I would like to open overlay with div in middle and use this id to acces another data in database. I have working overlay. I just don't know how to pass that variable.

It's something like this:

echo "<div class='friend'>".$a["username"]."<input type='hidden' value='$id'/>"."</div>";

I hope someone will understand what I'm asking for. :) I know it's terrible explanation.

Answer 1

Your clean code should be this:

echo '<div class="friend"> ' . $a["username"] . '<input type="hidden" value="' . $id . '"/></div>';

But way more cleaner would be having a list of your friends like this:

echo '<ul>';
echo '<li><a href="#' . $id . '" class="friend">' . $a["username"] . '</a></li>';
echo '</ul>';

When using jQuery for example you can handle click events with a few lines and pass your user id to an external PHP like this:

$('.friend').click(function(e) {
  e.preventDefault();

  $.get('/userDetails.php?uid=' + $(this).attr('href'), function(data) {
    alert(data);
  });
});

Answer 2

Something like this should work:

$('div.friend').click(function(){
   val = $(this).find("input").val();

   //open your overlay with the value as a parameter
});

Answer 3

This?

       echo "<div class='friend' onclick='(function(id){ $(\'#overlay\').html(id).show(); }(\'$id\'));'>".$a["username"]."<input type='hidden' value='$id'/>"."</div>";