display the details on click

Question

In my project, I have 3 tables - Survey, survey Questions, Survey options. In the survey table, it stores the survey names. In survey questions table store the questions to the respective survey. In the survey options table store the options of each question. Now I've displayed the survey names in a table. Here my problem is, When I click any survey name, it should display the corresponding questions of survey and options of that questions. for example, in the page, the survey names displayed like below 1. ABC survey 2. ERG survey

When I click on the ABC survey, it should display all questions and options related to that survey. I'm new to PHP coding. I'm using PHP, MySQL with XAMPP server. I did up to display the survey names.Below is my code

 <tr><th>Name</th><th>Created Date</th><th>Status</th></tr>
    <?php   
    $sql=mysqli_query($connection,"select * from survey"); 
    if(mysqli_num_rows($sql)==0) 
    { 
    echo "No records to display";
     }
     else {
     while($row=mysqli_fetch_array($sql)) {
     echo "<tr><td><a href='surveydetails.php' name='selected_survey_$i' 
    id='selected_survey'>".$row['survey_name']."</td><td>" .$row['created_date'] 
    ."</td>"; echo "<td>";
    if($row['status']==1){
    echo "<select name='status'>
    <option value='1' selected='selected'>Active</option>
    <option value='0'>Inactive</option>                                  
    </select>";
    }
    else{
    echo "<select name='status'>
    <option value='1'>Active</option>
    <option value='0' selected='selected'>Inactive</option></select>";
    }
    echo "</td></tr>";
    $i++;
    }
} 
?>

Answer 1

Below are different way to achieve

1. Write javascript onClick function on in Name with survey id.Call AJAX request using javascript and fetch data from database regarding both table like question/answer. Show data into window popup screen (AJAX response data show in popup).

2. Write javascript onClick function on in Name with survey id.Call AJAX request and retrieve information from database and show into popup box. Information will show in fancy look, if you use bootstrap.(You can use bootstrap modal box.) Refer good example here Bootstrap 3 - How to load content in modal body via AJAX?

Bootstrap: List data showing into Table. Providing link to view more Detail Call AJAX request to retrieve data from back end Refer Below sample code:

/*Test. PHP file*/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table class="table table-striped table-bordered" style="width:100px;" id="sample">
    <tr>
        <th>Name</th>
    </tr>

    <tr>
        <td><button id="3" class="viewDetail">Surya</button></td>
    </tr>

    <tr>
        <td><button id="2" class="viewDetail">ABCD</button></td>
    </tr>

</table>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Content</h4>
            </div>

            <div class="modal-body" id="contentBody">

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

<script>
    $(document).ready(function () {
        $('#sample').on('click', '.viewDetail', function (e) {
            var id = $(this).attr('id');
            $.ajax({
                type: "POST",
                url: "getDetail.php?id=" + id,
                data: {id: id}
            }).done(function (data) {
                $("#contentBody").html(data);
                $('#myModal').modal({show: true});
            });
        });
    });
</script>




/*Second File : getDetail.php*/
<?php
$id = $_REQUEST['id'];
echo "Receive data from backend for ID ".$id;
?>