How to fetch data from database when clicked on checkbox and display in a table?


#1

This is what I have done so far

      <label class="checkbox-inline">

Existing Currency Card

the php code is as follows:
if(isset( $_POST[“exs_card_details”])){
$s=“SELECT * FROM bta_card_details WHERE tgi_id=’$emp_id’”;
$r= mysqli_query($bta_conn,$s);
$row = mysqli_fetch_array($r);

$bta_card_bankName = $row[“bta_card_bankName”];
$bta_card_expiry_dt= $row[“bta_card_expiry_dt”];
}


#2

You will have to bind an event to the click in javascript to trigger the action.


#3

I already did that by using onclick() still I am not getting the data


#4

Hi @shruti ,
Here is a mock example of what you have supplied. I have stripped out the SQL parts so that it loads fake data. You should be able to build on this example and get an idea of what is required.

// I've stripped out all of your logic so you'll need to add that back in.
if (isset($_POST['exs_card_details'])) {
    $bta_card_bankName  = 'Super Bank';
    $bta_card_expiry_dt = date('Y-m-d h:i:s');

    // Return JSON here so you can return multiple values.
    // Another option is to return a rendered HTML page, but this is much more effecient for simple data.
    echo json_encode(array(
        'bankname' => $bta_card_bankName,
        'expiry'   => $bta_card_expiry_dt
    ));
    exit;
}

?>

<!-- This is a supppper simple html page! This is only a guide.-->
<html>
    <head>
        <script>
            // This function is triggered by the checkbox being toggled.
            function doRequest(element) {
                // If checked we do the ajax request.
                if (element.checked == true) {
                    // This is done in straight JS, but you might find it simpler in jQuery or 
                    // another javascript framework. http://api.jquery.com/jquery.ajax/
                    var xhr= new XMLHttpRequest();

                    // The method is POST, the "window.location" means we are loading the same page, "true" is asynchronous 
                    xhr.open('POST', window.location, true);

                    // Let the server know we're submitting a form
                    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    xhr.onreadystatechange= function() {
                        if (this.readyState!==4) return;
                        if (this.status!==200) return; // or whatever error handling you want

                        // This takes the json string and makes it a JS object.
                        let response = JSON.parse(this.responseText);

                        // Show the hidden table div
                        document.getElementById('table').style.display = "block";

                        // Add the values to the appropriate DOM elements.
                        document.getElementById('bankname').innerHTML= response.bankname;
                        document.getElementById('expiry').innerHTML= response.expiry;
                    };

                    // Send the request with the data you required for auth.
                    // I would assume you would need more information then just the following.
                    xhr.send('exs_card_details=1');
                } else {
                    // When the checkbox is unchecked. Hide the table.
                    // You could clear the data too if you needed.
                    document.getElementById('table').style.display = "none";
                }
            }
        </script> 
    </head>
    <body>
        <!-- Checkbox calls the doRequest method -->
        <input type="checkbox" id="checkbox" onclick="doRequest(this)">
        <!-- Table is hidden by default -->
        <!-- Notice I haven't used a table. You should be able to apply any html you like and even generate the html dynamically using javascript if required. -->
        <div id="table" style="display: none;">
            <span id="bankname" style="font-weight: bold;"></span>
            <span id="expiry"></span>
        </div>
    </body>
</html>

#5

Thank you @polk_farody