There’s a great article on persistent checkboxes on reload by @James_Hibbard. What about something like this that works with Ajax pagination (select listed items, go to another page, and keep already selected items while selecting new ones, keeping all desired items selected when ready to submit the form)?
So far, I haven’t seen a lot written about it, though I’ve found examples in places like MailChimp.
Any ideas?
Hey,
I’m still not sure what you’re on about here. Do you have some example code showing the Ajax pagination and the check boxes?
Sorry! New to the forums…
My PHP (on the main index.php) looks like this:
<script src="tools/pag_inventory/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div class="post-wrapper">
<div class="loading-overlay"><div class="overlay-content"><?php echo icon_lg('time'); ?></div></div>
<div id="posts_content">
<?php
//Include pagination class file
include('Pagination.php');
//Include database configuration file
include('dbConfig.php');
$limit = 15;
//get number of rows
$queryNum = $db->query("SELECT COUNT(*) as postNum FROM products");
$resultNum = $queryNum->fetch_assoc();
$rowCount = $resultNum['postNum'];
//initialize pagination class
$pagConfig = array('baseURL'=>'tools/pag_inventory/getData.php', 'totalRows'=>$rowCount, 'perPage'=>$limit, 'contentDiv'=>'posts_content');
$pagination = new Pagination($pagConfig);
//get rows
$query = $db->query("SELECT * FROM products ORDER BY id DESC LIMIT $limit");
if($query->num_rows > 0){ ?>
<div class="posts_list" id="checkbox-container">
<table width="100%">
<?php
while($row = $query->fetch_assoc()){
$postID = $row['id'];
?>
<tr><td class="pagination_chk"><input type="checkbox" name="x" value="<?php echo $row["id"]; ?>" id="<?php echo $row["id"]; ?>" /> <label for="<?php echo $row["id"]; ?>" class="list_item block"><?php echo $row["name"]; ?></label></td></tr>
<?php } ?>
</table>
</div>
<?php echo $pagination->createLinks(); ?>
<?php } ?>
</div>
</div>
My JavaScript at the bottom contains the material from the article:
<script type="text/javascript">
// Show loading overlay when ajax request starts
$( document ).ajaxStart(function() {
$('.loading-overlay').show();
});
// Hide loading overlay when ajax request completes
$( document ).ajaxStop(function() {
$('.loading-overlay').hide();
});
// Checkboxes
var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
$checkboxes = $("#checkbox-container :checkbox");
$checkboxes.on("change", function(){
$checkboxes.each(function(){
checkboxValues[this.id] = this.checked;
});
localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
});
// On page load
$.each(checkboxValues, function(key, value) {
$("#" + key).prop('checked', value);
});
</script>
There is a getData.php file that gets included on each page turn that closely resembles this one. In the end, the result works pretty well, until form submission. It remembers the checked boxes but only submits the selections on the current page.
Am I making any sense here??
Kinda 
The PHP is kinda hard to parse. Could you maybe add a link to somewhere I can see this running.
So you’re wanting to keep track of a bunch of checkboxes through a multistep form and have them all submit to a server-side script when the form finally submits?
Yeah, I guess it’s complicated…
Here’s a link to see the problem in action.
So you’re wanting to keep track of a bunch of checkboxes through a multistep form and have them all submit to a server-side script when the form finally submits?
Yes, that’s basically it. When I dump everything from $_POST, it only shows the items I selected from whatever specific page I happen to be turned to, but nothing from other pages, even if they are selected.
Ok, gotchya.
I don’t think the persistent checkboxes thing will help you here, as this technique is more designed to remember user preferences etc.
What I would do here is make this a session based thing (unless you want your visitors to be remember their choices between visits to the site).
In this case there are a number of solutions. Off the bat, I would probably make one form (so that people with JS disabled can still use the site) and then add the pagination on top of that. Here’s what that might look like.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Pagination demo</title>
<style>
label{
display: block;
}
input[type='submit']{
margin-top: 15px;
}
form a{
display: block;
margin: 8px 0 0 0;
}
</style>
</head>
<body>
<form action="submit.php" method="post">
<div id="page1" data-category="Food">
<p><strong>Food</strong></p>
<label><input type="checkbox" name="food[]" value="hotdog">Hot dog</label>
<label><input type="checkbox" name="food[]" value="fries">Fries</label>
<label><input type="checkbox" name="food[]" value="buger">Burger</label>
<label><input type="checkbox" name="food[]" value="kebab">Kebab</label>
</div>
<div id="page2" data-category="Drink">
<p><strong>Drink</strong></p>
<label><input type="checkbox" name="drink[]" value="beer">Beer</label>
<label><input type="checkbox" name="drink[]" value="shake">Shake</label>
<label><input type="checkbox" name="drink[]" value="juice">Juice</label>
<label><input type="checkbox" name="drink[]" value="water">Water</label>
</div>
<div id="page3" data-category="Dessert">
<p><strong>Dessert</strong></p>
<label><input type="checkbox" name="dessert[]" value="cake">Cake</label>
<label><input type="checkbox" name="dessert[]" value="icecream">Ice cream</label>
<label><input type="checkbox" name="dessert[]" value="espresso">Espresso</label>
</div>
<input type="submit" value="Submit" id="submit">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function emptyForm(){
$("form div").each(function(){
$(this).hide();
});
}
function paginate(id){
var next = (id >= $pages.length-1)? 0 : id+1;
emptyForm();
$pages[id].fadeIn();
$('<a>',{
text: "See " + $pages[next].data("category"),
href: "#",
click: function(e){
e.preventDefault();
paginate(next);
$(this).remove();
}
}).insertBefore('#submit');
}
var $pages = [
$("#page1"),
$("#page2"),
$("#page3")
]
paginate(0);
</script>
</body>
</html>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.