Everything works fine unless a user clicks back/forward. At which point the checkbox values do not reset to previous state.
I have a HTML form (with php) to input search criteria with a submit button to execute a search. I used hidden input fields for the two checkboxes to retain the value after the submit executes. That looks like this:
search.php
<?php
$search = [];
$search['keyword'] = $_GET['keyword'] ?? '';
$search['startDateRange'] = $_GET['startDateRange'] ?? '';
$search['endDateRange'] = $_GET['endDateRange'] ?? '';
$search['requestedBy'] = $_GET['requestedBy'] ?? '';
if (isset($_GET['openStatus'])) {
$search['openStatus'] = $_GET['openStatus'];
} else {
$search['openStatus'] = "on";
}
if (isset($_GET['closedStatus'])) {
$search['closedStatus'] = $_GET['closedStatus'];
} else {
$search['closedStatus'] = "on";
}
?>
<form action="search.php" autocomplete="off" id="searchCriteria">
<label>Keyword</label>
<input type="text" autocomplete="off" value = "<?php echo $search['keyword']; ?>" name="keyword" id="keyword" />
<br>
<label>Request Date</label>
<input type="date" value = "<?php echo $search['startDateRange']; ?>" name="startDateRange" id="startDateRange" />
<label>to</label>
<input type="date" value = "<?php echo $search['endDateRange']; ?>" name="endDateRange" id="endDateRange"/>
<br>
<label>Requested By</label>
<input type="text" value = "<?php echo $search['requestedBy']; ?>" name="requestedBy"
id="requestedBy"/>
<br>
<input type="hidden" name="openStatus" value="off" >
<input type="checkbox" value = "on" id="openStatus" name="openStatus" <?php echo $search['openStatus']=="on" ? 'checked' : ''; ?>/>
<label>include Open Requests</label>
<br>
<input type="hidden" name="closedStatus" value="off" >
<input type="checkbox" value = "on" id="closedStatus" name="closedStatus" <?php echo $search['closedStatus']=="on" ? 'checked' : ''; ?>/>
<label>include Completed Requests</label>
<br>
<input type="submit" value="Refine Search">
<button onclick="location.href='index.php'" type="button">
Back to Requests</button>
</form>
This works fine until the user hits the back button. To fix this problem I added the following javascript:
<script>
//added to fix back/forward button cache problem
window.addEventListener("pageshow", () => {
//these four work
document.getElementById("keyword").value = "<?php echo $search['keyword']; ?>";
document.getElementById("startDateRange").value = "<?php echo $search['startDateRange']; ?>";
document.getElementById("endDateRange").value = "<?php echo $search['endDateRange']; ?>";
document.getElementById("requestedBy").value = "<?php echo $search['requestedBy']; ?>";
//these two don't work
document.getElementById("openStatus").value = "<?php echo $search['openStatus']; ?>";
document.getElementById("closedStatus").value = "<?php echo $search['closedStatus']; ?>";
>";
});
</script>
This javascript properly reset the text type input values, but doesn't reset the checkbox fields. I assume the problem lies in my use of the hidden input fields, but it's unclear to me how to fix it. Any help is appreciated!
