Link to home
Start Free TrialLog in
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.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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

ASKER

I want that when I check a box, it posts to the top of the query where began = Y and .: etc
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.
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
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial