Send php variable onclick through javascript code

Question

I have a form table, in which when I click on Show button, then a popup window open. Till now everything is good.

But after click on Show button, I also want to send php variable in popup window and want to show values related to that variable. How it can be possible?

My table is below

<table align="center">
    <?php 
       include("connection.php");
       $query1=mysql_query("select * from career") or die(mysql_error());
       while($row1=mysql_fetch_array($query1))
       {
            extract($row1);
    ?>
    <tr>
        <td>Designation</td>
        <td><input type="text" name="des" value="<?php echo $designation; ?>"></td>
        </td>
    </tr>
    <tr>
        <td>Number of position</td>
        <td><input type="text" name="des" value="<?php echo $no_of_position; ?>"></td>
        </td>
    </tr>
    <tr>
        <td>Experience</td>
        <td><input type="text" name="des" value="<?php echo $experience; ?>"></td>
        </td>
    </tr>
    <tr>
        <td>Qualification</td>
        <td><input type="text" name="des" value="<?php echo $qualification; ?>"></td>
        </td>
    <tr>
        <td>Job profile</td>
        <td><input type="text" name="des" value="<?php echo $job_profile; ?>"></td>
    </tr>
    <tr>
        <td><?php echo"$id"; ?></td>
        <td><button onclick="document.getElementById('id01').style.display='block'" style="width:auto;" id="id1">Show</button>
       </td>
    </tr>
    <tr>
        <td></td>
        <td>&nbsp;</td>
    </tr>
    <?php } ?>
</table>

In above code when I click on Show Button, then popup window open, code is below:

<div id="id01" class="modal1">
    <form class="modal1-content animate" action="xyz.php">
        <div class="imgcontainer">
            <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close modal1">&times;</span>
        </div>
        <div class="container">
           <div>Content</div>
        </div>
    </form>
</div>

<script>
    // Get the modal1
    var modal1 = document.getElementById('id01');

    // When the user clicks anywhere outside of the modal1, close it
    window.onclick = function(event) {
        if (event.target == modal1) {
            modal1.style.display = "none";
        }
    }
</script>

I want to send id variable , by which I can fetch values from database in popup window.

Thank you.

Answer 1

If I understand correctly you need an ajax call to a php page like this:

modalService.php

if(!isset($_GET['id']){
     echo "no request";
     exit;
}
$id = $_GET['id'];
//Do your query and echo the modal content

table

<td><?php echo $id; ?></td>
<td>
    <button onclick="myFunction('<?php echo $id; ?>')" >Show</button>
 </td>

JS

function myFunction(id){
    var modal = document.getElementById("id01");
    modal!==null && (modal.style.display="block");
    var modalServiceUrl = "./modalService.php?id="+id;
    //xhr to get modalService
}

EDIT: USING JQUERY

<button data-queryid="<?php echo $id; ?>" class="showModal">Show</button>

jQuery(document).ready(function($){
    var modal = document.getElementById("id01");
    $("button.showModal").on("click", function(){
        modal.fadeIn();
        var id = $(this).attr("data-queryid");
        var modalServiceUrl = "./modalService.php?id="+id;
        modal.load(modalServiceUrl);
    });
});