Make check boxes work

<?php 

require "../connection.php";



$query= "Select * from meals where is_active= '1' AND category ='entree' ";
$result=mysqli_query($conn,$query);

$query11= "Select * from meals where is_active= '1' AND category ='soup' ";
$result11=mysqli_query($conn,$query11);


$query21= "Select * from meals where is_active= '1' AND category ='bowl' ";
$result21=mysqli_query($conn,$query21);


$query31= "Select * from meals where is_active= '1' AND category ='salad' ";
$result31=mysqli_query($conn,$query31);		

$filters= "select * from meals LEFT JOIN meal_options ON meals.id = meal_options.meal_id LEFT JOIN main_filters ON meal_options.id = main_filters.meal_options_id where main_filters.vegan = 'N'";
$result_filter=mysqli_query($conn,$filters); ///THIS IS HOW I FILTER
	
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../assets/css/style.css?v=<?php echo rand();?>">
<link rel="stylesheet" href="../assets/css/fonts.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="pageContent">

	<div id="OrderContainer">
		<div>
	<div id="OrderGetStarted1" class="new1" style="height:0px">
		<div class="started">
			<span class="block">
				<h1 class="textCenter OldStandard fontt">Hi <?php echo $firstname?>, Now comes the fun part!</h1>
		</span>
		</div>
		</div>
	
<div class="row rowing">
<form method="post">
  <div class="col-6 col-md-3 checkbox-rounds" id="filter-checks">
  <p class="orange OldStandard"> Menu Filters</p>
  <a type="button" class="check orange pointer OldStandard">Select All </a>
  <br>
  <a type="button" class="uncheck orange pointer OldStandard"> Unselect All</a>
  <br>
        <input type="checkbox" class="checkbox-round" value="vegan" 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" value="vegetarian" 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" value="pescetarian" 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" value="dairy-free" 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" value="egg-free" 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" value="fish-free" 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" value="shellfish" 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" value="tree" 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" value="peanut" 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" value="soy" 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" value="total-fat" 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" value="saturated-fat" 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" value="cholesterol" 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" value="sodium" 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" value="protein" 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" value="calories" 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>
  
  </div>
</form>

	<div class="col col-md-9" id="display_menu" style="margin-left:-80px;">
  	<p class="orange OldStandard pull-left title_menu">Soups </p>  
  	  	<button  class="disabled1 white cbtn1 pull-right" type="submit" id="submit" >Checkout  <i class="fa fa-long-arrow-right"></i></button>
  
		
		  	
		<div class= "flex rowWrap foodDiv">
			
<?php while($row11 = mysqli_fetch_assoc($result11)) {
	$name1=$row11['name'];
	$subtitle1=$row11['subtitle'];
	$image1=$row11['image_url'];
	$thumbnail1=$row11['thumb_url'];
	$meal_id1 = $row11['id'];
	
	$query12="select * from meal_options where meal_id = '$meal_id1'";
	$result12=mysqli_query($conn,$query12);

	
	$labels1=array();
	$prices1 =array();
	while($row12 = mysqli_fetch_assoc($result12))
	{
		$label1= $row12['label'];
		$labels1[]= $label1;
		
		$price1= $row12['price'];
		$price1 = number_format($price1/100, 2);
		$price1 = "$" . $price1;
		$prices1[]= $price1;
		
	}
	
	$labels1=implode(" | ",$labels1);
	//$prices1 = implode(" - ", $prices1);
	$firstEle = $prices1[0];
	$lastEle = $prices1[count($prices1) - 1];
	//echo $firstEle ."-". $lastEle;die;
	
?>
			
				<span class="deliveryItem satin pointer vertical-top textCenter">
				 <img src="<?php echo $image1; ?>" width="250px" height= "200px;" class="foodImage">
				<div class="menuDelivery">
				<h3 class= "textCenter OldStandard dark-orange font1"> <?php echo $name1;?> </h3>
				<p class= "OldStandardItalic text-black font2"> <?php echo $subtitle1;?> </p>
				<hr>
				<span class="open_sansbold text-black">
				<?php	if(count($prices1) > 1){print_r($firstEle ."-". $lastEle);}
				else{ print_r($price1);}
				?>
				<br>
				</span>
				<span class="text-black font2">
				<?php if(mysqli_num_rows($result12) >= 1){echo @$labels1;}  ?>
				
				<br>
				</span>
				<button  class="view white cbtn1 open_sansbold">View/Add</button>
				</div>
				</span>
  
				
				<?php }?>
		</div>	
		
	
			<p class="orange OldStandard pull-left title_menu">Bowls</p>  
		
				<div class= "flex rowWrap foodDiv">
			
<?php while($row21 = mysqli_fetch_assoc($result21)) {
	$name21=$row21['name'];
	$subtitle21=$row21['subtitle'];
	$image21=$row21['image_url'];
	$thumbnail21=$row21['thumb_url'];
	$meal_id21 = $row21['id'];
	
	$query22="select * from meal_options where meal_id = '$meal_id21'";
	$result22=mysqli_query($conn,$query22);
	
	$labels22=array();
	$prices22 =array();
	while($row22 = mysqli_fetch_assoc($result22))
	{
		$label22= $row22['label'];
		$labels22[]= $label22;
		
		$price22= $row22['price'];
		$price22 = number_format($price22/100, 2);
		$price22 = "$" . $price22;
		$prices22[]= $price22;
		
	}
	$labels22=implode(" | ",$labels22);
	//$prices22 = implode(" - ", $prices22);
	$firstEle22 = $prices22[0];
	$lastEle22 = $prices22[count($prices22) - 1];
	
	
?>
			
				<span class="deliveryItem satin pointer vertical-top textCenter">
				 <img src="<?php echo $image21; ?>" width="250px" height= "200px;" class="foodImage">
				<div class="menuDelivery">
				<h3 class= "textCenter OldStandard dark-orange font1"> <?php echo $name21;?> </h3>
				<p class= "OldStandardItalic text-black font2"> <?php echo $subtitle21;?> </p>
				<hr>
				<span class="open_sansbold text-black">
				<?php if(count($prices22) > 1){print_r($firstEle22 ."-". $lastEle22);}
				else{ print_r($price22);}?>
				<br>
				</span>
				<span class="text-black font2">
				<?php if(mysqli_num_rows($result22) >= 1){echo @$labels22;}  ?>
				
				<br>
				</span>
				<button  class="view white cbtn1 open_sansbold">View/Add</button>
				</div>
				</span>
  
				
				<?php }?>
		</div>
	
	
	
	
	
<p class="orange OldStandard pull-left title_menu">Salad</p>  
		
				<div class= "flex rowWrap foodDiv">
			
<?php while($row31 = mysqli_fetch_assoc($result31)) {
	$name31=$row31['name'];
	$subtitle31=$row31['subtitle'];
	$image31=$row31['image_url'];
	$thumbnail31=$row31['thumb_url'];
	$meal_id31 = $row31['id'];
	
	$query32="select * from meal_options where meal_id = '$meal_id31'";
	$result32=mysqli_query($conn,$query32);
	
	$labels32=array();
	$prices32 =array();
	while($row32 = mysqli_fetch_assoc($result32))
	{
		$label32= $row32['label'];
		$labels32[]= $label32;
		
		$price32= $row32['price'];
		$price32 = number_format($price32/100, 2);
		$price32 = "$" . $price32;
		$prices32[]= $price32;
		
	}
	$labels32=implode(" | ",$labels32);
	//$prices32 = implode(" - ", $prices32);
	$firstEle32 = $prices32[0];
	$lastEle32 = $prices32[count($prices32) - 1];
	
	
?>
			
				<span class="deliveryItem satin pointer vertical-top textCenter">
				 <img src="<?php echo $image31; ?>" width="250px" height= "200px;" class="foodImage">
				<div class="menuDelivery">
				<h3 class= "textCenter OldStandard dark-orange font1"> <?php echo $name31;?> </h3>
				<p class= "OldStandardItalic text-black font2"> <?php echo $subtitle31;?> </p>
				<hr>
				<span class="open_sansbold text-black">
				<?php if(count($prices32) > 1){print_r($firstEle32 ."-". $lastEle32);}
				else{ print_r($price32);}?>
				<br>
				</span>
				<span class="text-black font2">
				<?php if(mysqli_num_rows($result32) >= 1){echo @$labels32;}  ?>
				
				<br>
				</span>
				<button  class="view white cbtn1 open_sansbold">View/Add</button>
				</div>
				</span>
  
				
				<?php }?>
		</div>
		
	
	
	
	
	
	
	
	
		
		<p class="orange OldStandard pull-left title_menu">Entr&#233;es</p>  
		
				<div class= "flex rowWrap foodDiv">
			
<?php while($row = mysqli_fetch_assoc($result)) {
	$name=$row['name'];
	$subtitle=$row['subtitle'];
	$image=$row['image_url'];
	$thumbnail=$row['thumb_url'];
	$meal_id = $row['id'];
	
	$query2="select * from meal_options where meal_id = '$meal_id'";
	$result2=mysqli_query($conn,$query2);
	
	$labels=array();
	$prices =array();
	while($row2 = mysqli_fetch_assoc($result2))
	{
		$label= $row2['label'];
		$labels[]= $label;
		
		$price= $row2['price'];
		$price = number_format($price/100, 2);
		$price = "$" . $price;
		$prices[]= $price;
		
	}
	$labels=implode(" | ",$labels);
	//$prices = implode(" - ", $prices);
	$firstEle1 = $prices[0];
	$lastEle1 = $prices[count($prices) - 1];
	
	
?>
			
				<span class="deliveryItem satin pointer vertical-top textCenter">
				 <img src="<?php echo $image; ?>" width="250px" height= "200px;" class="foodImage">
				<div class="menuDelivery">
				<h3 class= "textCenter OldStandard dark-orange font1"> <?php echo $name;?> </h3>
				<p class= "OldStandardItalic text-black font2"> <?php echo $subtitle;?> </p>
				<hr>
				<span class="open_sansbold text-black">
				<?php if(count($prices) > 1){print_r($firstEle1 ."-". $lastEle1);}
				else{ print_r($price);};?>
				<br>
				</span>
				<span class="text-black font2">
				<?php if(mysqli_num_rows($result2) >= 1){echo @$labels;}  ?>
				
				<br>
				</span>
				<button  class="view white cbtn1 open_sansbold">View/Add</button>
				</div>
				</span>
  
				
				<?php }?>
		</div>	
		
  
	</div>
</div>
		</div>
		
	</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
$(document).ready(function() {
	$('.check').click(function() {
		  $('input[type="checkbox"]').prop("checked", true);
		});

		$('.uncheck').click(function() {
		  $('input:checkbox').prop("checked", false);
		  $(".chk-btn").hide();
		  
		});		
});
</script>
</body>
</html>

Open in new window


Css:
.foodDiv{
	
margin-top: 50px;
margin-left:-30px;
	
}
.foodImage{
	
position: absolute;
z-index: 2;
margin-left: -125px;
}
.title_menu{
	margin-top: 15px;
}

Open in new window


How can I make my checkbox filter every-time I click on a filter checkbox, At first it is all checked, then when I start clicking, it becomes unchecked so it removes the tables I dont want. I tried putting it in a form and having it post everytime, but Im unsure if this is the way to do it.
LVL 1
Jazzy 1012Asked:
Who is Participating?
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.

Julian HansenCommented:
Can you explain a bit more what you are trying to do.

I get that you are using checkboxes to turn content on and off but don't understand why this would have anything to do with a POST back to the server - this would be a JavaScript operation withing the client.
0
Marco GasiFreelancerCommented:
I agree with Julian. You could post the form anytime you check/uncheck a check box and run the filtering script reloading the page, but this is a typical task for Ajax instead.
I am on mobile now so I can't post a code example, but you have just to bind the click event and call a filtering script through Ajax updating the page with returned values.
0
Ray PaseurCommented:
For anyone coming to this question and wanting to help, here is the antecedent question that asked, "How can I make it that if I click vegan this query executes: "Select * from meals where filter = "vegan" AND filter = "protien >1" ....
https://www.experts-exchange.com/questions/29013838/Make-checkboxes-execute-queries-on-click.html
0
Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Jazzy 1012Author Commented:
I want that when I check a box, it posts to the top of the query where began = Y and .: etc
0
Ray PaseurCommented:
Jasmine, these need to be two separate scripts.  It may be possible to contain them in one script file, but the events have a timeline that you want to understand in order to make the scripts work.

The article about HTTP will help, if you read it carefully and for understanding.
https://www.experts-exchange.com/articles/11271/Understanding-Client-Server-Protocols-and-Web-Applications.html

When you request a web page, by typing a URL into the browser address bar, your browser sends the request to a server.  The request is atomic, complete and stateless, meaning that the server can only respond on the basis of what the request contains, and information already in the server at the time of the request.  The server is ignorant of prior requests.

The server responds by preparing a web page (or something like it).  This is called the response.  It is atomic, complete and usually instantaneous.  The server sends the response and then the server disconnects from the internet and sits idle waiting for the next request.

By the time you see a web page in your browser viewport, the server that generated the web page has already gone dormant!

You can't mix the form and PHP in a sequence from top to bottom and expect the request / response events to work in the same order.  The HTTP protocol simply does not work this way.  Instead, let your thinking be separately about the client and about the server.  They are two different things, and the appearance of "interactivity" through AJAX requests is a deception of convenience.  They underlying events of web applications all follow the request / response design of the HTTP client / server protocol.  This is true whether you load "net new" web pages for each request, or whether you trigger the request without loading a new page, and only put the response into a <div> of the existing document object model.
1
Jazzy 1012Author Commented:
Yes but I wanted to do something much easier which would be every time I click the top query that has the meals changes and gets the value of the checkbox so it would be filtered before it even starts the entire page
0
Julian HansenCommented:
I put this together based on the code you posted
http://www.marcorpsa.com/ee/t2274.php

Not really helpful but I am going to guess that the list on the left as you click on and off the items should modify the list on the right where the latter shows only those items that match the categories posted on the left?

If that is the case then the right way of doing this (given your dataset is relatively small) is to download the entire data set as a JavaScript object and then simply manipulate the interface based on the selection on the left. So what you do is onclick on the left you loop through the JS object and match the options that are in the left selected items. You then hide / show those options.

There is also an option of doing an AJAX call to the server each click but in my view that is just going to complicate matters.
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:
doing an AJAX call to the server each click...
For some reason, that seems to be a popular idea here at E-E recently -- we've seen a small collection of questions asking how to get data from the server in response to a click on a checkbox.  As I wrote earlier, this is an anti-practice.  It can be done, and like trying to eat worms, it's not likely to have a good end result.

I agree with Julian that a better design strategy might gather the data up into JSON and send it to the client at page-load time.  Then you can use JavaScript to handle the client experience.  But if you need to get the client input back to the database on your server, you will probably want some kind of AJAX interaction.  Or a submit  button.  Submit buttons are good.

The SSCCE is a powerful idea.  You might consider deconstructing this problem into some things that are smaller (less than hundreds of lines of code).  Then you could focus on each part separately.  What information is in the database?  What needs to be sent to the client?  What needs to be gotten back from the client?  Once each of the parts is simplified, isolated, understood, and tested it's usually easy to put the application together, add the style and JavaScript animation.  Then you've got a working app that is built with individually tested components.  This approach usually leads to a good outcome.
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.