复选框过滤无效

I have a couple of checkboxes to filter the results from database but I have two problems, the first is that I am using $_POST variable and when I hit refresh I am getting a confirm form submission dialog, which I don't want as the user may hit refresh many times.

The 2nd part of it is that, if I replace $_POSTwith $_GET I don't see the the confirm message but the checkboxes don't work. Anyone has any idea?

 <script type="text/javascript">  
    $(function(){
     $('.checkbox').on('change',function(){
        $('#form').submit();
        });
    });
  </script>


  <form id="id" method="post" action="">
 <input type="checkbox" name="new" class="checkbox" <?php if(isset($_POST['new'])) echo "checked"; ?>/> New<br>
 <input type="checkbox" name="used" class="checkbox" <?=(isset($_POST['used'])?' checked':'')?>/> Used<br>
 <input type="checkbox" name="ref" class="checkbox" <?=(isset($_POST['ref'])?' checked':'')?>/> Refurbished<br>
 </form>

 if(isset($_GET['page']))
        {
            $page = $_GET['page'];
        }
        else
        {
            $page = 1;
        }
        $options = array(
            'results_per_page'              => 2,
            'url'                           => 'products.php?search=' . urlencode($q) . '&amp;page=*VAR*',
            'db_handle'                     => $dbh
        );
            if (isset($_POST["ref"])) {
            $arguments[] = " condition LIKE '%refur%'  ";
           } 
           if (isset($_POST["new"])) {
            $arguments[] = " condition LIKE '%new%' ";
           } 
           if (isset($_POST["used"])) {
            $arguments[] = " condition LIKE '%use%' ";
           } 
          if(!empty($arguments)) {
          $str = implode(' or ',$arguments);
          $qry = "SELECT * FROM products where " . $str . " ORDER BY id desc";
          $paginate = new pagination($page, $qry, $options);
          echo $qry;
          }
          else {

           $paginate = new pagination($page, "SELECT * FROM products order by id desc", $options);
           }

This is just an idea, using the classical/modern ajax approach for submitting. Assume that this page is called jqpost.php:

<script>
$(document).ready(function () {
  $('.checkbox').on('change',function(){
    //$('#form').submit();
    var formdata = $("#form").serialize();
    $.post("jqpost.php", formdata, function(data) {
      $("#result").html("Post OK: " + formdata);
    });
  });
});
</script>

<form id="form" method="post" action="">
<input type="checkbox" name="new" class="checkbox" <?php if(isset($_POST['new'])) echo "checked"; ?>/> New<br>
<input type="checkbox" name="used" class="checkbox" <?=(isset($_POST['used'])?' checked':'')?>/> Used<br>
<input type="checkbox" name="ref" class="checkbox" <?=(isset($_POST['ref'])?' checked':'')?>/> Refurbished<br>
</form>

<div id="result"></div>

<?php
//...
?>

If a user clicks on a checkbox, jQuery will post data to jqpost.php script. In return, #result div will give a status text.

As a result, if the user presses the refresh button on browser, the form is not submitted again and again.