In HTMl from I have a Input field type month. When I select a month and click on search button then total days of selected month show in HTMl table with backend data. This table contain salary. I want the salary is calculate with Total days. I write a script. But When I click on search button the calculated salary doesn't show in input box in HTML table. When I change the value of total days from input field then all salary show in table.
I want It will show when I click on search button and if I need to modify days then it will also change. But I can't find out the problem is where?
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
include('conn.php');
include('navbar.php');
$error_msg = '';
$att_msg = '';
try {
// ...
if (isset($_POST['save'])) {
$course = $_POST['whichmonth'];
$con = mysqli_connect("localhost", "root", "", "madrasadb");
// Prepare the SQL statement
$stat = mysqli_prepare($con, "INSERT INTO stdattendence (id, stdname, stdfname, class, present, month) VALUES (?, ?, ?, ?, ?, ?)");
// Bind the parameters
mysqli_stmt_bind_param($stat, "ssssss", $stat_id, $stat_name, $stat_fname, $st_status, $course);
foreach ($_POST['st_status'] as $i => $st_status) {
$stat_id = $_POST['stat_id'][$i];
$stat_name = $_POST['stat_name'][$i];
$stat_fname = $_POST['stat_fname'][$i];
// Execute the prepared statement
mysqli_stmt_execute($stat);
}
$att_msg = "Attendance Recorded.";
mysqli_stmt_close($stat);
mysqli_close($con);
}
// ...
} catch (Exception $e) {
$error_msg = $e->getMessage();
}
?>
<!DOCTYPE html>
<html lang="en">
<body>
<div class="content">
<div class="container-fluid page-body-wrapper">
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h3>Attendance of <?php echo date('Y-m-d'); ?></h3>
<br>
<form action="" method="post" class="form-horizontal col-md-6 col-md-offset-3" onsubmit="return validateForm()">
<div class="form-group">
<strong>Select Month</strong>
<?php
// Check if the month is set in $_POST
$selectedMonth = isset($_POST['whichmonth']) ? $_POST['whichmonth'] : '';
?>
<input id="inputmonth" type="month" name="whichmonth" required="true" class="form-control" value="<?php echo $selectedMonth; ?>" onchange="calculateTotalDays()">
</div>
<div class="col-xs-6">
<button type="submit" class="btn btn-danger col-md-2 col-md-offset-5" style="border-radius:0%" name="search" click="calculateTotalSalary(); validateForm()">Search</button>
<input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="Save!" name="save" />
</div>
<table class="table table-stripped">
<thead>
<tr>
<th scope="col">Id. No.</th>
<th scope="col">Name</th>
<th scope="col">Designation</th>
<th scope="col">Salary</th>
<th scope="col">Present</th>
<th scope="col">PSalary</th>
</tr>
</thead>
<tbody>
<?php
// if (isset($_POST['search'])) {
$con = mysqli_connect("localhost", "root", "", "madrasadb");
// Prepare the SELECT statement
$all_query = mysqli_prepare($con, "SELECT id, name, designation, salary FROM jack ORDER BY id ASC");
// Execute the prepared statement
mysqli_stmt_execute($all_query);
// Bind the result variables
mysqli_stmt_bind_result($all_query, $id, $name, $designation, $salary);
while (mysqli_stmt_fetch($all_query)) {
?>
<tr>
<td><?php echo $id; ?> <input type="hidden" name="stat_id[]" value="<?php echo $id; ?>"></td>
<td><?php echo $name; ?><input type="hidden" name="stat_name[]" value="<?php echo $name; ?>"></td>
<td><?php echo $designation; ?> <input type="hidden" name="stat_fname[]" value="<?php echo $designation; ?>"></td>
<td><?php echo $salary; ?> <input type="hidden" name="salary[]" value="<?php echo $salary; ?>"></td>
<td>
<input type="number" name="st_status[]" style="width:70px" max="31" value="<?php echo isset($_POST['whichmonth']) ? date('t', strtotime($_POST['whichmonth'])) : ''; ?>" onchange="calculateTotalSalary(this, <?php echo $id; ?>)">
</td>
<td>
<input type="number" id="totalSalary<?php echo $id; ?>" name="total_salary[]" style="width:70px" readonly>
</td>
</tr>
<?php
}
mysqli_stmt_close($all_query);
mysqli_close($con);
?>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function calculateTotalDays() {
var selectedMonth = document.getElementById("inputmonth").value;
var totalDays = new Date(selectedMonth).getDate();
var presentInputs = document.querySelectorAll("input[name='st_status[]']");
for (var i = 0; i < presentInputs.length; i++) {
var presentInput = presentInputs[i];
presentInput.max = totalDays;
}
}
function calculateTotalSalary() {
var salaryInputs = document.querySelectorAll("input[name='salary[]']");
var presentInputs = document.querySelectorAll("input[name='st_status[]']");
var totalSalaryInputs = document.querySelectorAll("input[name='total_salary[]']");
for (var i = 0; i < salaryInputs.length; i++) {
var salaryInput = salaryInputs[i];
var presentInput = presentInputs[i];
var totalSalaryInput = totalSalaryInputs[i];
var salary = parseInt(salaryInput.value);
var present = parseInt(presentInput.value);
var selectedMonth = new Date(document.getElementById("inputmonth").value);
var totalDays = new Date(selectedMonth.getFullYear(), selectedMonth.getMonth() + 1, 0).getDate();
// Calculate the total salary based on the number of days present
var totalSalary = Math.floor((salary / totalDays) * present);
totalSalaryInput.value = isNaN(totalSalary) ? "" : totalSalary;
}
}
// Attach the calculateTotalSalary() function to the "search" button click event
document.querySelector("button[name='search']").addEventListener("click", function(event) {
calculateTotalSalary(); // Calculate the total salary when search button is clicked
});
function validateForm() {
var presentInputs = document.querySelectorAll("input[name='st_status[]']");
for (var i = 0; i < presentInputs.length; i++) {
var presentInput = presentInputs[i];
if (parseInt(presentInput.value) > 1) {
alert("Value must be less than or equal to 1.");
presentInput.focus();
return false;
}
}
return true;
}
// Attach the validateForm() function to the "search" button click event
document.querySelector("button[name='search']").addEventListener("click", function(event) {
if (!validateForm()) {
event.preventDefault(); // Prevent form submission
}
});
// Clear the error message when the month selection changes
document.getElementById("inputmonth").addEventListener("change", function() {
var presentInputs = document.querySelectorAll("input[name='st_status[]']");
for (var i = 0; i < presentInputs.length; i++) {
var presentInput = presentInputs[i];
presentInput.value = ""; // Clear the input field value
}
});
</script>
</body>
</html>
