Avatar of Jazzy 1012
Jazzy 1012
 asked on

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.
jQueryPHP

Avatar of undefined
Last Comment
Ray Paseur

8/22/2022 - Mon
Julian Hansen

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.
Marco Gasi

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.
Ray Paseur

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
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Jazzy 1012

ASKER
I want that when I check a box, it posts to the top of the query where began = Y and .: etc
Ray Paseur

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.
Jazzy 1012

ASKER
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
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.