Make checkboxes execute queries on click

I have these checkbox filters:
  <input type="checkbox" class="checkbox-round" id="vegan" checked/><label for="vegan" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Vegan</label>
        <br/>
        <input type="checkbox" class="checkbox-round" id="vegetarian" checked/> <label for="vegetarian" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Vegetarian</label>
        <br/>
        <input type="checkbox" class="checkbox-round" id="pescetarian" checked/> <label for="pescetarian" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Pescetarian</label>
         <br/>
        <input type="checkbox" class="checkbox-round" id="dairy-free" checked/> <label for="dairy-free" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Dairy-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" id="egg-free" checked/> <label for="egg-free" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Egg-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" id="fish-free" checked/> <label for="fish-free" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Fish-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" id="shellfish" checked/> <label for="shellfish" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span> Shellfish-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="tree" checked/> <label for="tree" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Tree nut-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="peanut" checked/> <label for="peanut" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Peanut-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="soy" checked/> <label for="soy" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span> Soy-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="total-fat" checked/> <label for="total-fat" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span> Low Total Fat</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="saturated-fat" checked/> <label for="saturated-fat" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Low Saturated Fat</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="cholesterol" checked/> <label for="cholesterol" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Low Cholesterol</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="sodium" checked/> <label for="sodium" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Low Sodium</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="protein" checked/> <label for="protein" class="OldStandard"> <span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Protein &#62;25g</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="calories" checked/> <label for="calories" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Calories  &#60;450 calories</label>
  		<br>

Open in new window

How can I make it that if I click vegan this query executes:

"Select * from meals where filter = "vegan" AND filter = "protien >1" ....
How can I make this happen?
LVL 1
Jazzy 1012Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
I will show you how to do this, and then I will explain why this is a bad idea.

Here is the server-side example from another recent question at E-E.
<?php // demo/temp_hachem_server.php
/**
 * https://www.experts-exchange.com/questions/29013838/Make-checkboxes-execute-queries-on-click.html
 *
 * https://www.experts-exchange.com/questions/29011455/Php-Get-value-checkbox-when-checked-In-php.html
 * https://www.experts-exchange.com/questions/29011219/Equivalence-of-serialize-in-PHP.html
 */
error_reporting(E_ALL);

// IF THERE IS A POST-METHOD REQUEST
if (!empty($_POST['q']))
{
    echo "REQUEST RECEIVED AT " . date('H:i:s');
    echo " WITH: ";
    echo implode(',', $_POST['q']);
    echo PHP_EOL;
}

Open in new window

And here is the client-side example.
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>

<!-- demo/temp_hachem_client.php -->

<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style type="text/css">
/* STYLE SHEET HERE */
</style>

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $(":checkbox").click(function(){
        var values = $("input:checkbox:checked").map(function(){
            return $(this).val();
        }).get();

        $.post("temp_hachem_server.php", {q:values}, function(response){
            $("#output").html(response);
        });
    });
});
</script>

<title>HTML5 Page With jQuery in UTF-8 Encoding</title>
</head>
<body>

<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>

<input type="checkbox" value="a" />
<input type="checkbox" value="b" />
<input type="checkbox" value="c" />

<div id="output" />

</body>
</html>

Open in new window

0
Ray PaseurCommented:
There are a few reasons I recommend against doing this.

1. People expect to be able to make multiple selections with checkboxes.  They expect to be able to uncheck the box if they change their minds.  So right away you've got an unnecessary programming issue on the server -- you will have to keep track of the checkboxes and somehow know when the client has fired the "last" checkbox.  Normally we can act on the contents of a checkbox when the client fires the submit control.

2. If you're giving the client one choice among many options, the radio control is the right tool.  Checkboxes come with the understanding that the client can choose none, one, or many options.

3. If the server makes a mistake or is otherwise balky, this will feed back negatively into the client experience.

So to sum up, the design we use for checkboxes is a form with a submit button.  The client experience involves checking the boxes, then firing the submit button.
1
Jazzy 1012Author Commented:
Can you show me an example on a those fiddle sites? im a bit confused with how it is working
0
Introduction to Web Design

Develop a strong foundation and understanding of web design by learning HTML, CSS, and additional tools to help you develop your own website.

Jazzy 1012Author Commented:
Where do I put the query?
0
Ray PaseurCommented:
I don't have an example on a fiddle site, but you can test it on my web site here:
https://iconoun.com/demo/temp_hachem_client.php
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ray PaseurCommented:
You would put the query in the server-side script.
0
Jazzy 1012Author Commented:
So wait I put my query here:
        $.post("select * from meals where filter = "  "", {q:values}, function(response){
            $("#output").html(response);

$ the values will be the id inside each checkbox?
0
Ray PaseurCommented:
No, please don't put your entire query in the request variables.  Those variables are in the client-side of the script.  That's a sure way to get hacked.  You cannot and must not trust the request variables.  They must be filtered and sanitized before any use.  A good strategy would be to transmit as little data as possible with the request - just a signal string or something like that.  Your server-side script will know the allowable values and will only accept known good values.

This article might be helpful...
https://www.experts-exchange.com/articles/11271/Understanding-Client-Server-Protocols-and-Web-Applications.html
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.