I have 3 column in my database as bodybuild, ethnictype and skincolor in table accounts. I need to search all the three columns at a time to fetch values from it using check boxes.
<h4 style="margin-left: 10px; color: gray;">Body Build Types</h4><ol><input type="checkbox" name="bodybuild[]" value="1" />Six Pack<br><input type="checkbox" name="bodybuild[]" value="2" />Fat<br><input type="checkbox" name="bodybuild[]" value="3" />Thin<br></ol><h4 style="margin-left: 10px; color: gray;">Ethnic Types</h4><ol><input type="checkbox" name="ethnictype[]" value="4" />Arab<br><input type="checkbox" name="ethnictype[]" value="5" />Indian<br></ol><h4 style="margin-left: 10px; color: gray;">Skin Color Types</h4><ol><input type="checkbox" name="skincolor[]" value="6" />Black<br><input type="checkbox" name="skincolor[]" value="7" />White<br></ol><input style="margin-left: 10px" type="submit" value='Search' /><br><br><input type="hidden" name="tab1" value="search"></form>
Column bodybuild contain 3 values as 1, 2 and 3
Column ethnictype contain 2 values as 4 and 5
Colum skincolor contain 2 values as 6 and 7
I want to pass the values selcted in check boxes from view page into url like this
/search/1&2&3&4&5&6&7 - when selecting all check boxes and
/search/1&4&6 - when selecting three values (1,4,6) or any other ways.
I can fetch single values from table (as /search/1) but not multiple values.
Please help. Thank you!!!
At last with the help of AJAX I got the solutions to my question. Thanks to all of them who had supported me. Iam posting the code for further candidates.
index.php
<body>
<h1>Demo</h1>
<table id="employees"><thead>
<tr><th>Name</th>
<th>BodyBuild</th>
<th>EthnicType</th>
<th>Skincolor</th></tr>
</thead><tbody></tbody>
</table>
<div id="filter">
<h2>Filter options</h2>
<div>
<h4>Body Build</h4>
<input type="checkbox" id="car" name="sixpack">
<label for="car">Six Pack</label>
</div>
<div>
<input type="checkbox" id="car" name="fat">
<label for="car">Fat</label>
</div>
<div>
<input type="checkbox" id="car" name="thin">
<label for="car">Thin</label>
</div>
<div>
<h4>Ethnic Type</h4>
<input type="checkbox" id="language" name="arab">
<label for="language">Arab</label>
</div>
<div>
<input type="checkbox" id="language" name="indian">
<label for="language">Indian</label>
</div>
<div>
<h4>Skin Color</h4>
<input type="checkbox" id="nights" name="black">
<label for="nights">Black</label>
</div>
<div>
<input type="checkbox" id="nights" name="white">
<label for="nights">White</label>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function makeTable(data){
var tbl_body = "";
$.each(data, function() {
var tbl_row = "";
$.each(this, function(k , v) {
tbl_row += "<td>"+v+"</td>";
})
tbl_body += "<tr>"+tbl_row+"</tr>";
})
return tbl_body;
}
function getEmployeeFilterOptions(){
var opts = [];
$checkboxes.each(function(){
if(this.checked){
opts.push(this.name);
}
});
return opts;
}
function updateEmployees(opts){
$.ajax({
type: "POST",
url: "search",
dataType : 'json',
cache: false,
data: {filterOpts: opts},
success: function(records){
$('#employees tbody').html(makeTable(records));
}
});
}
var $checkboxes = $("input:checkbox");
$checkboxes.on("change", function(){
var opts = getEmployeeFilterOptions();
updateEmployees(opts);
});
updateEmployees();
</script>
</body>
search.php
<?php
$pdo = new PDO('mysql:host=localhost;dbname=castingkall', 'root', '');
$select = 'SELECT name,bodybuild,ethnictype,skincolor';
$from = ' FROM accounts';
$where = ' WHERE TRUE';
$opts = isset($_POST['filterOpts'])? $_POST['filterOpts'] : array('');
if (in_array("sixpack", $opts)){
$where .= " AND bodybuild = 1";
}
if (in_array("fat", $opts)){
$where .= " AND bodybuild = 2";
}
if (in_array("thin", $opts)){
$where .= " AND bodybuild = 3";
}
if (in_array("arab", $opts)){
$where .= " AND ethnictype = 4";
}
if (in_array("indian", $opts)){
$where .= " AND ethnictype = 5";
}
if (in_array("black", $opts)){
$where .= " AND skincolor = 6";
}
if (in_array("white", $opts)){
$where .= " AND skincolor = 7";
}
$sql = $select . $from . $where;
$statement = $pdo->prepare($sql);
$statement->execute();
$results = $statement->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($results);
echo($json);
?>
Just change the database name, table name, column name and values according to your data.
Hope you find this useful
Related
I want to use JS library "Semantic-UI" with my PHP code
I want to replace the ordinary select boxes with "Semantic-UI Multiple selection Dropdown"
The original PHP Code that generates the Select items:
<div class="list-group">
<h3>Material</h3>
<?php
$query = "SELECT DISTINCT(product_gender) FROM product";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
?>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector gender" value="<?php echo $row['product_gender']; ?>" > <?php echo $row['product_gender']; ?></label>
</div>
<?php
}
?>
</div>
I want to replace input with Semantic-UI :
<div class="list-group">
<h3>Gender</h3>
<select multiple="" class="label ui selection fluid dropdown">
<?php
$query = "SELECT DISTINCT(product_gender) FROM product";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
?>
<div class="list-group-item checkbox">
<option name='gender' class="common_selector gender" value="<?php echo $row['product_gender']; ?>"><?php echo $row['product_gender']; ?></option>
</div>
<?php
}
?>
</select>
</div>
It gathers the options, But didn't post data, since the function that posts data is :
<script>
$(document).ready(function(){
filter_data();
function filter_data()
{
$('.filter_data').html('<div id="loading" style="" ></div>');
var action = 'fetch_data';
var es2 = get_filter('es2');
var bw2 = get_filter('bw2');
var tl = get_filter('tl');
var b2 = get_filter('b2');
var gender = get_filter('gender');
var material = get_filter('material');
var hinge = get_filter('hinge');
$.ajax({
url:"fetch_data.php",
method:"POST",
data:{action:action, es2:es2, bw2:bw2, tl:tl, b2:b2, gender:gender, material:material, hinge:hinge},
success:function(data){
$('.filter_data').html(data);
}
});
}
function get_filter(class_name)
{
var filter = [];
$('.'+class_name+':checked').each(function(){
filter.push($(this).val());
});
return filter;
}
$('.common_selector').click(function(){
filter_data();
});
});
And we get Data by this :
if(isset($_POST["gender"]))
{
$gender_filter = implode("','", $_POST["gender"]);
$query .= "
AND product_gender IN('".$gender_filter."')
";
}
if(isset($_POST["material"]))
{
So please how can I merge Semantic-UI with my code ?
Am trying to use order by date and price low to high in this statement
SELECT * FROM allpostdata WHERE sts = '1' AND mca='Vehicle' ORDER BY pdt DESC, prs ASC
i used echo $query; to get the query and here is how i did,
looking for ORDER BY pdt DESC, is default query i want prs to be user option .
when i select order by low to high or high to low the statement changes but query does nothing, its not sorting by price
How do i sort by prs any solution?
pdt means Date and prs means Price
HTML
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="sortby">
<li class="dropdown-item">
<div class="md-radio my-1">
<input type="radio" class="filter_all sort" name="sort" id="asc" value="ASC">
<label for="asc">Price : Low to High</label>
</div>
</li>
<li class="dropdown-item">
<div class="md-radio my-1">
<input type="radio" class="filter_all sort" name="sort" id="desc" value="DESC">
<label for="desc">Price : High to Low</label>
</div>
</li>
</div>
Script
$(document).ready(function () {
filter_data();
function filter_data() {
$.post(
"fetch.php",
{
action: 'fetch_data',
cate: get_filter('cate'),
brand: get_filter('brand'),
model: get_filter('model'),
sort: get_filter('sort'),
date: get_filter('date')
}
)
.done(function (data) {
$('.filter_data').html(data);
});
}
function get_filter(class_name) {
var filter = [];
$('.' + class_name + ':checked').each(function () {
filter.push($(this).val());
});
return filter;
}
$('.filter_all').click(function () {
filter_data();
});
});
PHP
if (isset($_POST["action"])) {
$query = "SELECT * FROM allpostdata WHERE sts = '1' AND mca='Vehicle'";
if (!empty($_POST['cate'])) {
$query .= " AND sca IN (" . str_repeat("?,", count($_POST['cate']) - 1) . "?)";
} else {
$_POST['cate'] = []; // in case it is not set
}
if (!empty($_POST['brand'])) {
$query .= " AND product_brand IN (" . str_repeat("?,", count($_POST['brand']) - 1) . "?)";
} else {
$_POST['brand'] = []; // in case it is not set
}
if (!empty($_POST['model'])) {
$query .= " AND mdl IN (" . str_repeat("?,", count($_POST['model']) - 1) . "?)";
} else {
$_POST['model'] = []; // in case it is not set
}
$query .= " ORDER BY pdt DESC";
if (!empty($_POST['sort'])) {
if ($_POST["sort"][0] == "ASC" || $_POST["sort"][0] == "DESC") { //simplistic whitelist
$query .= ", prs " . $_POST['sort'][0];
}
}
echo $query;
$stmt = $conn->prepare($query);
$params = array_merge($_POST['cate'], $_POST['brand'], $_POST['model']);
$stmt->execute($params);
$result = $stmt->fetchAll();
$total_row = $stmt->rowCount();
$output = '';
Add a third button for "Sort by date".
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="sortby">
<li class="dropdown-item">
<div class="md-radio my-1">
<input type="radio" class="filter_all sort" name="sort" id="asc" value="ASC">
<label for="asc">Price : Low to High</label>
</div>
</li>
<li class="dropdown-item">
<div class="md-radio my-1">
<input type="radio" class="filter_all sort" name="sort" id="desc" value="DESC">
<label for="desc">Price : High to Low</label>
</div>
</li>
<li class="dropdown-item">
<div class="md-radio my-1">
<input type="radio" class="filter_all sort" name="sort" id="date" value="date">
<label for="date">Date : High to Low</label>
</div>
</li>
</div>
if (empty($_POST['sort']) || $_POST['sort'][0] == "date") {
$query .= " ORDER BY pdt DESC";
} elseif ($_POST["sort"][0] == "ASC" || $_POST["sort"][0] == "DESC") {
$query .= " ORDER BY prs " . $_POST['sort'][0];
}
Been trying for hours trying to figure this out but not getting anywhere.
I am using labels as a checkbox. On check a checkbox, I would like the value of the database to be updated to 1. If the user unchecks the checkbox, I would like the value in the database to be update to 0.
This is the page:
<!DOCTYPE html>
<html>
<head>
<title>Territory</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<?php
require_once 'config.php';
$sql = "SELECT id, address, suburb, lat, lng, date, time FROM addresses";
$result = $conn->query($sql);
echo '<table style="margin:0 auto; max-width:320px;">
<tr>
</tr>';
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo '<tr>
<td><span style="font-weight:bold;">'.$row["address"].' '. $row["suburb"].'</span> <button style="float:right;" type="button">Go</button><br><br>
<div class="row">
<input type="checkbox" name="id" id="home['. $row["id"].']" value="1"/>
<label class="label" for="home['. $row["id"].']" id="home['. $row["id"].']"></label>
<span id="dropdown">
<select class="dropdown1" name="nhd1" id="'. $row["id"].'" >
<option></option>
<option>Mon</option>
<option>Tue</option>
<option>Wed</option>
<option>Thu</option>
<option>Fri</option>
<option>Sat</option>
<option>Sun</option>
</select>
<select class="dropdown2" name="nht1" id="'. $row["id"].'" >
<option></option>
<option>8:00am</option>
<option>8:30am</option>
<option>9:00am</option>
<option>9:30am</option>
<option>10:00am</option>
<option>10:30am</option>
<option>11:00am</option>
<option>11:30am</option>
<option>12:00pm</option>
<option>12:30pm</option>
<option>1:00pm</option>
<option>1:30pm</option>
<option>2:00pm</option>
<option>2:30pm</option>
<option>3:00pm</option>
<option>3:30pm</option>
<option>4:00pm</option>
<option>4:30pm</option>
<option>5:00pm</option>
<option>5:30pm</option>
<option>6:00pm</option>
<option>6:30pm</option>
<option>7:00pm</option>
<option>7:30pm</option>
</select>
<select class="dropdown1" name="nhd2" id="'. $row["id"].'" >
<option></option>
<option>Mon</option>
<option>Tue</option>
<option>Wed</option>
<option>Thu</option>
<option>Fri</option>
<option>Sat</option>
<option>Sun</option>
</select>
<select class="dropdown2" name="nht2" id="'. $row["id"].'" >
<option></option>
<option>8:00am</option>
<option>8:30am</option>
<option>9:00am</option>
<option>9:30am</option>
<option>10:00am</option>
<option>10:30am</option>
<option>11:00am</option>
<option>11:30am</option>
<option>12:00pm</option>
<option>12:30pm</option>
<option>1:00pm</option>
<option>1:30pm</option>
<option>2:00pm</option>
<option>2:30pm</option>
<option>3:00pm</option>
<option>3:30pm</option>
<option>4:00pm</option>
<option>4:30pm</option>
<option>5:00pm</option>
<option>5:30pm</option>
<option>6:00pm</option>
<option>6:30pm</option>
<option>7:00pm</option>
<option>7:30pm</option>
</select>
</span>
</div>
<input style="width:98.5%; margin-top:5px;" type="text" name="notes" placeholder="Add note">
<br><br>
</td>
<td>
</td>
</tr>';
echo '</div>';
}
} else {
echo "0 results";
}
echo '</table>';
$conn->close();
?>
<script>
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var home = 0;
if ($('input[type="checkbox"]').is(":checked")) {
var home = 1;
}
var id = $(this).val();
$.ajax({
url:"updateaddress.php",
method:"POST",
data:{home:home,id:id,},
success: function(data){
alert(data);
},
});
});
});
$(document).ready(function(){
$('select[name=nhd1]').change(function(){
var nhd1 = $(this).val();
var id = $(this).attr('id');
$.ajax({
url:"updateaddress.php",
method:"POST",
data:{nhd1:nhd1,id:id,},
});
});
});
$(document).ready(function(){
$('select[name=nhd2]').change(function(){
var nhd2 = $(this).val();
var id = $(this).attr('id');
$.ajax({
url:"updateaddress.php",
method:"POST",
data:{nhd2:nhd2,id:id,},
});
});
});
//learn to refresh page just in case more than one group working on map
</script>
echo '<tr>
<td><span style="font-weight:bold;">'.$row["address"].' '. $row["suburb"].'</span> <button style="float:right;" type="button">Go</button><br><br>
<div class="row">
<input type="checkbox" name="home['. $row["id"].']" id="home['. $row["id"].']" value="1"/>
<label class="label" for="home['. $row["id"].']" id="home['. $row["id"].']"></label>
</div>
<input style="width:98.5%; margin-top:5px;" type="text" name="notes" placeholder="Add note">
<br><br>
</td>
<td>
</td>
</tr>';
echo '</div>';
<script>
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if ($('input[type="checkbox"]').is(":checked")) {
var home = 1;
var id = $(this).attr('id');
$.ajax({
url:"updateaddress.php",
method:"POST",
data:{home:home,id:id,},
}
});
});
});
</script>
This is the query:
<?php
// Include config file
require_once 'config.php';
$id = mysqli_real_escape_string($conn, $_POST['id']);
$home = mysqli_real_escape_string($conn, $_POST['home']);
$nhd1 = mysqli_real_escape_string($conn, $_POST['nhd1']);
$nht1 = mysqli_real_escape_string($conn, $_POST['nht1']);
$nhd2 = mysqli_real_escape_string($conn, $_POST['nhd2']);
$nht1 = mysqli_real_escape_string($conn, $_POST['nht2']);
if(isset($_POST["home"])) {
$sql = "UPDATE addresses SET home='$home' WHERE id=$id";
if($conn->query($sql) === TRUE){
} else {
echo "error" . $sql . "<br>".$conn->error;
}
}
Create another input checkbox with same name and value of 0. If you don't click the checkbox, it will return the input box with same name and value of 0 or otherwise it will return value of 1.
<input type="checkbox" name="home['. $row["id"].']" id="home['. $row["id"].']" value="1"/>
<input type="hidden" name="home['. $row["id"].']" id="home['. $row["id"].']" value="0"/>
In the below code block, there was problem with your checkbox id not correctly set, as well as its value. I fixed it with:
echo '<tr>
<td><span style="font-weight:bold;">'.$row["address"].' '. $row["suburb"].'</span> <button style="float:right;" type="button">Go</button><br><br>
<div class="row">
<input type="checkbox" name="id" id="id" value="'.$row["id"].'"/>
<label class="label" for="home['. $row["id"].']" id="home['. $row["id"].']"></label>
</div>
<input style="width:98.5%; margin-top:5px;" type="text" name="notes" placeholder="Add note">
<br><br>
</td>
<td>
</td>
</tr>';
echo '</div>';
You have syntax errors in your JQuery script. They're fixed. Also you're not setting home = 0 when uncheck happens. And you don't check for status response from server. I added that as well.
Try this:
<script>
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var home = 0;
if ($('input[type="checkbox"]').is(":checked")) {
var home = 1;
}
var id = $(this).val();
$.ajax({
url:"updateaddress.php",
method:"POST",
data:{home:home,id:id,},
success: function(data){
alert(data);
},
});
});
});
</script>
In your updateaddress.php, I added an status output to notify you of successful update.
Change to:
<?php
require_once 'config.php';
print_r( $_POST );
$id = mysqli_real_escape_string($conn, $_POST['id']);
$home = mysqli_real_escape_string($conn, $_POST['home']);
$nhd1 = mysqli_real_escape_string($conn, $_POST['nhd1']);
$nht1 = mysqli_real_escape_string($conn, $_POST['nht1']);
$nhd2 = mysqli_real_escape_string($conn, $_POST['nhd2']);
$nht1 = mysqli_real_escape_string($conn, $_POST['nht2']);
if(isset($_POST["home"])) {
$sql = "UPDATE addresses SET home='$home' WHERE id=$id";
if($conn->query($sql) === TRUE){
echo "Success";
} else {
echo "error" . $sql . "<br>".$conn->error;
}
}
?>
There is a form where the user enters a number and according to the condition applied on the number, a list of addresses are displayed. I would like to store the data that is returned through AJAX. The code on the page that has a form:
index.php
<script>
$(document).ready(function() {
$("#phone").keyup(function() {
var number = $("#phone").val();
$.ajax({
url: "t_fetchaddr.php",
type: 'POST',
data: 'number='+number,
cache: false,
}).done(function(html) {
$('#results').html(html);
});
});
});
<script>
<form action="insert_temp.php" method="POST">
<input type="text" name="phoneno" id="phone" value="" />
<div id="results"></div>
<button class="button btn btn-primary btn-large" type="submit" name="submit" value="submit">Submit</button>
</form>
code on t_fetchaddr.php page
$val = $_REQUEST['number'];
$sql2 = "SELECT * FROM user_address where number='".$val."' ";
$result2 = mysqli_query($con, $sql2);
if (mysqli_num_rows($result2) > 0)
{ ?>
<div class="span6" >
<div class="span3">
<? while($row2 = mysqli_fetch_assoc($result2))
{ ?>
<input type="radio" name="old_address" value="<? echo $row2['address']; ?>" ><? echo $row2['address']; ?><br>
<? } ?>
</div>
</div>
<? } ?>
code on insert_temp.php page
$old_address = mysqli_real_escape_string($con, $_POST['old_address']);
echo $old_address;
Everything is working fine until displaying of the address through number, but when I submit the form it is not going to the back end. I tried to echo $old_address but got nothing.
other input values in index page inside the form are going to backend but value that is being fetched from t_fetchaddr.php page is not getting carried, Can anyone please tell where I went wrong
Try this and watch your console :
$(document).ready(function() {
$("#phone").keyup(function() {
var number = $(this).val();
$.ajax({
url: "t_fetchaddr.php",
type: 'POST',
data: {number:number},
cache: false,
success : function(html) {
$('#results').html(html);
},
error : function(err){
console.log(err);
}
});
});
});
<script>
$(document).ready(function()
{
$("#phone").keyup(function()
{
var number = $("#phone").val();
$.ajax({
url: "t_fetchaddr.php",
type: 'POST',
data: {number :number}, //modified
cache: false,
success:function(html)
{
$('#results').html(html);
}
});
});
});
</script>//Missing closing
<form action="insert_temp.php" method="POST">
<input type="text" name="phoneno" id="phone" value="" />
<div id="results"></div>
<button class="button btn btn-primary btn-large" type="submit" name="submit" value="submit" >Submit</button>
</form>
and in php
$val = $_POST['phoneno'];
$sql2 = "SELECT * FROM user_address where number='".$val."' ";
$result2 = mysqli_query($con, $sql2);
if (mysqli_num_rows($result2) > 0)
{ ?>
<div class="span6" >
<div class="span3">
<? while($row2 = mysqli_fetch_assoc($result2))
{ ?>
<input type="radio" name="old_address" value="<? echo $row2['address']; ?>" ><? echo $row2['address']; ?><br>
<? } ?>
</div>
</div>
<? } ?>
Note:
Missing closing tag </script>
And this line changed data: 'number='+number,
just try this code on fetchaddr.php
i have just removed the in between php tags.
<?
$val = $_REQUEST['number'];
$sql2 = "SELECT * FROM user_address where number='".$val."' ";
$result2 = mysqli_query($con, $sql2);
if (mysqli_num_rows($result2) > 0) {
echo '<div class="span6" >
<div class="span3">';
while($row2 = mysqli_fetch_assoc($result2))
{
echo '<input type="radio" name="old_address" value="'.$row2['address'].'" >'.$row2['address'].'<br>';
}
echo '</div>
</div>';
} ?>
hopefully this will solve your problem.
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) . '&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.