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”];
}
You will have to bind an event to the click in javascript to trigger the action.
I already did that by using onclick() still I am not getting the data
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>