HTML: keeping checkbox checked after page refresh

Question

I would like to keep the checked boxes to stay checked when the page is refreshed.

Actually my page is not just refreshed, I mean like I have pagination and if I hit the next button the url will change like index.php?page=2

The below code can keep the boxes checked after refreshing page but fails when I click on the next page and the url changes to as the above.

So how do i keep the boxes checked? I have tried putting $_GET['page'] on the checkbox but it doesn't work.

<form id="form" method="post" action=""> <input type="checkbox" name="s" class="checkbox" <?=(isset($_POST['s'], $_GET['page'])?' checked':'')?>/> Small<br> </form> <script type="text/javascript"> $(function(){ $('.checkbox').on('change',function(){ $('#form').submit(); }); }); </script>

Here is the php part which creates the page id. I have this php code below the above form:

if(isset($_GET['page'])) { $page = $_GET['page']; } else { $page = 1; } /* * Set a few of the basic options for the class, replacing the URL with your own of course */ $options = array( 'results_per_page' => 2, 'url' => 'index.php?page=*VAR*', 'db_handle' => $dbh );

iConnor · Accepted Answer · 2013-08-11 02:57:12Z

For modern browsers you can use localStorage like so

$(function(){ var value = localStorage.input === 'true' ? true: false; // 1 $('input').prop('checked', value || false); }); $('input').on('change', function() { localStorage.input = $(this).is(':checked'); });

Demo: http://jsfiddle.net/CC2hC/1

When the input is changed you store the value in localStorage, and when the page loads again you check if it is there and apply the value or default to false

For older browsers you will probably have to use cookies or a database.

You have to check the value on the line with the comment // 1 because prop accepts a boolean value whereas the localStorage value would be a string

Collectives™ on Stack Overflow

HTML: keeping checkbox checked after page refresh

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related