How to echo a value out from a button? - php

Question

I have a page that have a button like this,
When this button is clicked, a pop out modal will show,
Once the submit button is clicked, a small note will show up,
Below are my codes,
<div class="col-md-12" role="main">
<div class="bs-docs-section">
<h1 class="page-header">Today's Activity <button class="btn btn-primary">Add new</button></h1>
</div>
<?php
$con = getDbConnect();
$day = date("l");
if (mysqli_connect_errno($con)) {
"Failed to connect to MySQL: " . mysqli_connect_error();
} else {
$result = mysqli_query($con, "SELECT * FROM timetableschedule WHERE staffID= '" . $staff_information["staff_Id"] . "' AND day='" . $day . "' ");
while ($schedule = mysqli_fetch_array($result)) {
?>
<div class="col-md-3">
<button class="btn btn-warning" data-toggle="modal" data-target="#myModal" schedule="
<?php
echo "<br/>";
echo $schedule['academicInstitution'] . "<br />";
echo $schedule['startTime'] . "-" . $schedule['endTime'] . "hrs<br />";
echo "<br/>";
?>">
<?php
echo "<br/>";
echo $schedule['academicInstitution'] . "<br />";
echo $schedule['startTime'] . "-" . $schedule['endTime'] . "hrs<br />";
echo "<br/>";
?>
</button>
</div>
<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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Insert Today's Activity</h4>
</div>
<div class="modal-body">
<p class="activity"></p>
<p>Click on the submit button if the above infomation is correct.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary btn-ok SUB" >Submit</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#myModal').on('show.bs.modal', function (e) {
$(this).find('.btn-ok').attr('schedule', $(e.relatedTarget).attr('schedule'));
$('.activity').html('You have selected: <strong>' + $(this).find('.btn-ok').attr('schedule') + '</strong>');
});
$(document).ready(function(){
$(".SUB").click(clickSUB);
})
function clickSUB(){
$("#processSUB").load("hello.php");
}
</script>
<div id="processSUB"></div>
<?php
}
mysqli_close($con);
}
?>
</div>
My codes for the hello.php,
<?php
echo 'You have submitted';
echo $schedule['timetableId'];
?>
Is there a way to get the 'timetableId' from the button?

Answer 1

Check 2nd Parameter of load() to pass data as parameter, you can pass timetableId or any other parameter required.
load('hello.php', { timetableId : javascriptVarWithValue });
you will receive passed data in $_POST in hello.php
In hello.php you can access like:
<?php echo $_POST['timetableId']; ?>
In loop, load the timetableId something like:
<div id="tableID" data-timetable-id="<?php $schedule['timetableId']; ?>" style="display: none;"></div>
In clickSUB() fetch the value something like this:
function clickSUB(){
// changed to data('timetableId') instead of data('timeTableId')
var timeTableId = $('#tableID').data('timetableId');
console.log(timeTableId);
$("#processSUB").load("hello.php", { timetableID : timeTableId });
}