javascript - Show data based of selected id on modal popup window after click a button php mysql

Question

On my website, when the button is clicked, it will prompt to a popup window. Im using the modal popup window. My problem is, I cant get the right data that being retrieved based on the id of the button. Below is my code: The html table:

<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family"; 
                    $result = $conn->query($data);                          

                        while($ser=mysqli_fetch_array($result)) 
                        {

?>  
                                            <tr>
                                                <td><center><?php echo $counter; 
                                                                    $counter++; ?></center></td>
                                                <td><center><?php echo $ser['fam_id'];?></center></td>
                                                <td><center><?php echo $ser['fam_name']; ?></center></td>

                                                <td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>

The fam_id is the primary key.

Then, below is the code for modal popup window

<!-- Modal -->
<form id="form1" method="post">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
      </div>
      <div class="modal-body">
        <b>Details</b>
        <hr></hr>
        Address: <?php echo $ser['fam_add']; ?><p></p>
        Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</form>

Moreover, Im doing them in one file. In conclusion, it is like below:

<tbody>
    <?php
    $counter = 1;
    $data = "SELECT * FROM family"; 
                        $result = $conn->query($data);                          

                            while($ser=mysqli_fetch_array($result)) 
                            {

    ?>  
                                                <tr>
                                                    <td><center><?php echo $counter; 
                                                                        $counter++; ?></center></td>
                                                    <td><center><?php echo $ser['fam_id'];?></center></td>
                                                    <td><center><?php echo $ser['fam_name']; ?></center></td>

                                                    <td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>

<!-- Modal -->
    <form id="form1" method="post">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
          </div>
          <div class="modal-body">
            <b>Details</b>
            <hr></hr>
            Address: <?php echo $ser['fam_add']; ?><p></p>
            Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    </form>
</td>
</tr>
<?php
}
?>
</tbody>

Answer 1

<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family"; 
$result = $conn->query($data);                          
while($ser=mysqli_fetch_array($result)) 
{
?>  
<tr>
    <td><center><?php echo $counter; $counter++; ?></center></td>
    <td><center><?php echo $ser['fam_id'];?></center></td>
    <td><center><?php echo $ser['fam_name']; ?></center></td>

    <td>
        <center>
            <a class="modalLink" href="#myModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $ser["fam_id"]; ?>" data-addr="<?php echo $ser['fam_add']; ?>" data-phone="<?php echo $ser['fam_phone']; ?>" data-name="<?php echo $ser['fam_name']; ?>">
              <button class="btn btn-primary btn-sm">
                Edit Attendance Status
              </button>
            </a>
        </center>

Place this code in footer.php or end of this page.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div>

Call your 'somepage.php' (Separate page.Where modal-body is present) through ajax. Place this <script></script> in your JS file.

<script>
$('.modalLink').click(function(){
    var famID=$(this).attr('data-id');
    var famAddr=$(this).attr('data-addr');
    var famPhone=$(this).attr('data-phone');
    var famName=$(this).attr('data-name');

    $.ajax({url:"somepage.php?famID="+famID+"&famAddr="+famAddr+"&famPhone="+famPhone+"&famName="+famName,cache:false,success:function(result){
        $(".modal-content").html(result);
    }});
});
</script>

somepage.php Create somepage.php (If you want to change this page name. Change in <script></script> too. Both are related.)

<?
$famID=$_GET['famID'];
$famAddr=$_GET['famAddr'];
$famPhone=$_GET['famPhone'];
$famName=$_GET['famName'];

?>

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="fam_id">Name <?php echo $famName;?></h4>
</div>
<div class="modal-body">
    <form id="form1" method="post">
        <b>Details</b>
        <hr></hr>
        Address: <p><?php echo $famAddr;?></p>
        Phone_num: <p><?php echo $famPhone;?></p>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>