We help IT Professionals succeed at work.

Make check boxes work

Jazzy 1012
Jazzy 1012 asked
on
166 Views
Last Modified: 2017-04-05
<?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.
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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 GasiFreelancer
CERTIFIED EXPERT
Top Expert 2010

Commented:
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.
Most Valuable Expert 2011
Author of the Year 2014

Commented:
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

Author

Commented:
I want that when I check a box, it posts to the top of the query where began = Y and .: etc
Most Valuable Expert 2011
Author of the Year 2014

Commented:
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.

Author

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
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
Most Valuable Expert 2011
Author of the Year 2014
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions