Link to home
Start Free TrialLog in
Avatar of Jazzy 1012
Jazzy 1012

asked on

Create an array that saves the quantities of an id and changes when you on click the button option

I have this code, it allows me to pick the quantities for the days and when I click on add to cart and go back to the meal, I can still see my quantities, but as you can see I have different meal options, is there a way to make the quantities consistent with the ids? that if my quantity for beef is 2 2 1, and then I go back to click chicken, it will start with the quantities I have for that meal option ?

User generated image
here is my code that makes it happen:
		<?php 
		    $qty_new_mon = "0";
			$qty_new_tues = "0";
			$qty_new_wed = "0";
			$qty_new_thur= "0";
			$qty_new_fri = "0";
			foreach($label_name as $meal_option_id => $names_of_labels){
          			if($_SESSION['protiens']['mon'][$meal_option_id]['qty'] >0)
          			{
						$qty_new_mon =$_SESSION['protiens']['mon'][$meal_option_id]['qty']; 
						$default_option = $meal_option_id;
					}
					if($_SESSION['protiens']['tues'][$meal_option_id]['qty'] >0)
					{
						$qty_new_tues =$_SESSION['protiens']['tues'][$meal_option_id]['qty'];
						$default_option = $meal_option_id;
					}
					if($_SESSION['protiens']['wed'][$meal_option_id]['qty'] >0)
					{
						$qty_new_wed =$_SESSION['protiens']['wed'][$meal_option_id]['qty'];
						$default_option = $meal_option_id;
					}
					if($_SESSION['protiens']['thur'][$meal_option_id]['qty'] >0)
					{
						$qty_new_thur =$_SESSION['protiens']['thur'][$meal_option_id]['qty'];
						$default_option = $meal_option_id;
					}
					if($_SESSION['protiens']['fri'][$meal_option_id]['qty'] >0)
					{
						$qty_new_fri =$_SESSION['protiens']['fri'][$meal_option_id]['qty'];
						$default_option = $meal_option_id;
					}
			}

		?>
    <form id="all_values" class="none" method="post" action="../deliveries/">
		<input type="text" id="protien_id" name="protiens" value="<?php echo $label_id;?>">
		<input type="text" id="monday" name="mon" value="<?php echo $qty_new_mon ?>">
		<input type="text" id="tuesday" name="tues" value="<?php echo $qty_new_tues ?>">
		<input type="text" id="wednesday" name="wed" value="<?php echo $qty_new_wed ?>">
		<input type="text" id="thursday" name="thur" value="<?php echo $qty_new_thur ?>">
		<input type="text" id="friday" name="fri" value="<?php echo  $qty_new_fri ?>">
		<input hidden="" name="mode" value="menu">
		<input hidden="" name="maile_id" value="<?php echo $_GET['meal_id'];?>">
		<input type="text" id="totalprice" name="totalprice" value="<?php echo $prices_alone;?>">
    </form>
<div class="wrapper options">
  <div class="container" style="margin-top:500px">
<div style="display:block;position:relative;background-color: #ffffff">

          <div class="selectionOverlay1 flex">
          <div class="cont-cont" style="margin-bottom:40px">
            <article class="relative infoBox OpenSansLight">
            <span class="hairline"></span>
            <h1 class="OldStandard textCenter darkRed"><?php echo $name;?></h1>
            <br>
            <p class="OldStandardItalic textCenter subtitle"><?php echo $subtitle;?></p>
            <hr style="width:150px">
            <center>
           <span> 
           	<span class= "prices">
           	<?php 
           	if(count($prices) > 1)
           	{
				print_r($firstEle ." - ". $lastEle);
			}
			else
			{ 
				echo@$prices[0];
			}?>
			</span>
           <?php 
           $all_prices[] = array();
           foreach($label_name as $meal_option_id => $names_of_labels)
           {
			$q_prices = "select price from meal_options where id = '$meal_option_id'";
			$r_prices = mysqli_query($conn,$q_prices);
			
				
			$meal_prices = $row_prices['price'];
			$meal_prices = number_format($meal_prices/100, 2);
			$meal_prices = "$" . $meal_prices;
			
			
			
			?>
			<div class="price-options">  
				<?php 
				while($row_prices = mysqli_fetch_assoc($r_prices)){
							$meal_prices = $row_prices['price'];
							$meal_prices = number_format($meal_prices/100, 2);
							$meal_prices = "$" . $meal_prices;
					?>

					<span id = "price_option-<?php echo $meal_option_id?>" class="none prices"><?php echo $meal_prices; ?></span>
				
				
				<?php }?>
				
		 	</div>
		 	<?php }?>
			
			
			
			
           <br>
            </span>
            <?php 
            if(mysqli_num_rows($result2) >= 2){
            
            
            foreach($label_name as $meal_option_id => $names_of_labels)
            {
				echo '<button price='.$protein_prices[$meal_option_id].' label_option= '.$meal_option_id.' class="view1 white cbtn1 open_sansbold option protein-option">' .$names_of_labels. ' <span id="price-difference-for-'.$meal_option_id.'"></span></button>';

			}}?>
            </center>
            
            <br>
            <div class="textCenter" style="font-weight:700">
				Add this meal to the delivery days below:
				<br><br>
			</div>
			<table>

		<?php if($value1 != ''){?>
			<div class="satin background_option">
				<p style="display:inline-block;margin-right:150px"><?php echo @$value6[0]; ?></p>
				<span style="float:right;">
					<i id="qty-minus1" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
					<input id="qty1" type="number" value="<?php echo $qty_new_mon;?>" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
					<i id="qty-plus1" class="fa fa-plus-circle controls"  style="color: #d7d6d0"></i>
				</span>
			</div>
		<?php }?>
		
		<?php
		if($tuesday_time1 != ''){ 
		if(is_array($tuesday_time1)){
		?>
		<div class="satin background_option" style="margin-top:10px;height:50px;">
			<p style="display:inline-block;margin-right:150px"><?php echo @$tuesday_time1[0]; ?></p>
			<span style="float:right;">
				<i id="qty-minus2" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
				<input id="qty2" type="number" value="<?php echo $qty_new_tues;?>" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
				<i id="qty-plus2" class="fa fa-plus-circle controls"  style="color: #d7d6d0"></i>
			</span>
		</div>
		<?php }
			else{
		?>
		<div class="satin background_option" style="margin-top:10px;height:50px;">
			<p style="display:inline-block;margin-right:150px"><?php echo $tuesday_time1; ?></p>
			<span style="float:right;">
				<i id="qty-minus2" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
				<input id="qty2" type="number" value="<?php echo $qty_new_tues;?>" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
				<i id="qty-plus2" class="fa fa-plus-circle controls"  style="color: #d7d6d0"></i>
			</span>
		</div>
		<?php } ?>
		<?php }?>
		<?php if($wednesday_time1 != ''){
			if(is_array($wednesday_time1)){?>
		 	<div class="satin background_option" style="margin-top:10px;height:50px;">
				<p style="display:inline-block;margin-right:150px"><?php echo @$wednesday_time1[0]; ?></p>
				<span style="float:right;">
					<i id="qty-minus3" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
					<input id="qty3" type="number" value="<?php echo $qty_new_wed;?>" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
					<i id="qty-plus3" class="fa fa-plus-circle controls"  style="color: #d7d6d0"></i>
				</span>
			</div>
		<?php }
			else{ ?>
			<div class="satin background_option" style="margin-top:10px;height:50px;">
				<p style="display:inline-block;margin-right:150px"><?php echo $wednesday_time1; ?></p>
				<span style="float:right;">
					<i id="qty-minus3" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
					<input id="qty3" type="number" value="<?php echo $qty_new_wed;?>" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
					<i id="qty-plus3" class="fa fa-plus-circle controls"  style="color: #d7d6d0"></i>
				</span>
			</div>
		<?php }?>
		<?php }?>
		<?php if($thursday_time1 != ''){
			if(is_array($thursday_time1)){
			?>
			<div class="satin background_option" style="margin-top:10px;height:50px;">
				<p style="display:inline-block;margin-right:150px"><?php echo @$thursday_time1[0]; ?></p>
				<span style="float:right;">
					<i id="qty-minus3" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
					<input id="qty3" type="number" value="<?php echo $qty_new_thur;?>" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
					<i id="qty-plus3" class="fa fa-plus-circle controls"  style="color: #d7d6d0"></i>
				</span>
			</div>
		<?php }
			else{ ?>		
			<div class="satin background_option" style="margin-top:10px;height:50px;">
				<p style="display:inline-block;margin-right:150px"><?php echo $thursday_time1; ?></p>
				<span style="float:right;">
					<i id="qty-minus4" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
					<input id="qty4" type="number" value="<?php echo $qty_new_thur;?>" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
					<i id="qty-plus4" class="fa fa-plus-circle controls"  style="color: #d7d6d0"></i>
				</span>
			</div>
		<?php }?>
		<?php }?>
		<?php if($friday_time1 != ''){
			if(is_array($friday_time1)){
		?>
			<div class="satin background_option" style="margin-top:10px;height:50px;">
				<p style="display:inline-block;margin-right:150px"><?php echo @$friday_time1[0]; ?></p>
				<span style="float:right;">
					<i id="qty-minus5" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
					<input id="qty5" type="number" value="<?php echo $qty_new_fri;?>" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
					<i id="qty-plus5" class="fa fa-plus-circle controls"  style="color: #d7d6d0"></i>
				</span>
			</div>		
		<?php }
			else{ ?>	
			<div class="satin background_option" style="margin-top:10px;height:50px;">
				<p style="display:inline-block;margin-right:150px"><?php echo $friday_time1; ?></p>
				<span style="float:right;">
					<i id="qty-minus5" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
					<input id="qty5" type="number" value="<?php echo $qty_new_fri;?>" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
					<i id="qty-plus5" class="fa fa-plus-circle controls"  style="color: #d7d6d0"></i>
				</span>
			</div>
		<?php }?>
		<?php }?>
</table>
			<center>
			<a style="color:white;text-decoration:none;" href="../deliveries"><button class=" view-add white cbtn1 open_sansbold option">Back </button></a>
			<button id= "add-to-cart" class=" view-disable white cbtn1 open_sansbold option" disabled> ADD TO CART </button>
			</center>
            </article>

Open in new window


Here is my page source:
 <span> 
           	<span class= "prices">
           	$15.00 - $17.00			</span>
           			<div class="price-options">  
				
					<span id = "price_option-1101" class="none prices">$15.00</span>
				
				
								
		 	</div>
		 				<div class="price-options">  
				
					<span id = "price_option-1102" class="none prices">$16.00</span>
				
				
								
		 	</div>
		 				<div class="price-options">  
				
					<span id = "price_option-1103" class="none prices">$17.00</span>
				
				
								
		 	</div>
		 				
			
			
			
           <br>
            </span>
            <button price=15 label_option= 1101 class="view1 white cbtn1 open_sansbold option protein-option">Tofu <span id="price-difference-for-1101"></span></button><button price=16 label_option= 1102 class="view1 white cbtn1 open_sansbold option protein-option">Chicken <span id="price-difference-for-1102"></span></button><button price=17 label_option= 1103 class="view1 white cbtn1 open_sansbold option protein-option">Beef <span id="price-difference-for-1103"></span></button>            </center>
            
            <br>
            <div class="textCenter" style="font-weight:700">
				Add this meal to the delivery days below:
				<br><br>
			</div>
			<table>

					<div class="satin background_option">
				<p style="display:inline-block;margin-right:150px">Monday, May 15th</p>
				<span style="float:right;">
					<i id="qty-minus1" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
					<input id="qty1" type="number" value="2" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
					<i id="qty-plus1" class="fa fa-plus-circle controls"  style="color: #d7d6d0"></i>
				</span>
			</div>
				
							<div class="satin background_option" style="margin-top:10px;height:50px;">
				<p style="display:inline-block;margin-right:150px">Wednesday, May 17th</p>
				<span style="float:right;">
					<i id="qty-minus3" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
					<input id="qty3" type="number" value="2" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
					<i id="qty-plus3" class="fa fa-plus-circle controls"  style="color: #d7d6d0"></i>
				</span>
			</div>
									
			<div class="satin background_option" style="margin-top:10px;height:50px;">
				<p style="display:inline-block;margin-right:150px">Friday, May 19th</p>
				<span style="float:right;">
					<i id="qty-minus5" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
					<input id="qty5" type="number" value="3" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
					<i id="qty-plus5" class="fa fa-plus-circle controls"  style="color: #d7d6d0"></i>
				</span>
			</div>
				</table>
			<center>
			<a style="color:white;text-decoration:none;" href="../deliveries"><button class=" view-add white cbtn1 open_sansbold option">Back </button></a>
			<button id= "add-to-cart" class=" view-disable white cbtn1 open_sansbold option" disabled> ADD TO CART </button>
			</center>
            </article>

Open in new window

Avatar of Jazzy 1012
Jazzy 1012

ASKER

I already have this JavaScript to do the pricing on the buttons

	$(".protein-option").click(function() {
		var this_id = $(this).attr("label_option");
		var this_price = parseInt($(this).attr("price"), 10);
		console.log("this_id" + this_id + "-- " + this_price);

		$("#totalprice").val($(this).attr("price"));
		
		$(".protein-option").each(function() {
			var loop_id = $(this).attr("label_option");
			var loop_price = parseInt($(this).attr("price"), 10);
			var difference = loop_price - this_price;
			var sign = Math.sign(difference);
			difference = Math.abs(difference);
			difference = parseFloat(difference).toFixed(2);
			if(sign == 0) {
				difference = "$0.00";
			} else if (sign == 1) {
				difference = "+$" + difference;
			} else if (sign == -1) {
				difference = "-$" + difference;
			}
						
			console.log(loop_id + " -- " + loop_price + " -- " + difference + " -- " + sign);
			$("#price-difference-for-"+loop_id).html(difference);
		});
		
		$("#price-difference-for-"+this_id).html(" ");
	});

	$("[label_option='<?=$default_option?>']").click();
	
});	

Open in new window



Inside this I put this script it gives me the button meal id, along with the qtys when I click on it
           var meal_label_qty = $(this).attr("label_option");
		var id_mon_qty = $("#qty1").val();
		var id_tues_qty = $("#qty2").val();
		var id_wed_qty = $("#qty3").val();
		var id_thur_qty = $("#qty4").val();
		var id_fri_qty = $("#qty5").val();

Open in new window


So how can I make it that in the array it stores the "mean_label id" along with its own qty and when I click on it the qty changes on what is inside the array?
Avatar of Julian Hansen
The easiest is to have separate sets of inputs for each of the tabs.
Yes but then when i enter the data for the post, it will be different
Explain - I am not understanding the question correctly?
   <form id="all_values" class="none" method="post" action="../deliveries/">
		<input type="text" id="protien_id" name="protiens" value="<?php echo $label_id;?>">
		<input type="text" id="monday" name="mon" value="<?php echo $qty_new_mon ?>">
		<input type="text" id="tuesday" name="tues" value="<?php echo $qty_new_tues ?>">
		<input type="text" id="wednesday" name="wed" value="<?php echo $qty_new_wed ?>">
		<input type="text" id="thursday" name="thur" value="<?php echo $qty_new_thur ?>">
		<input type="text" id="friday" name="fri" value="<?php echo  $qty_new_fri ?>">
		<input hidden="" name="mode" value="menu">
		<input hidden="" name="maile_id" value="<?php echo $_GET['meal_id'];?>">
		<input type="text" id="totalprice" name="totalprice" value="<?php echo $prices_alone;?>">
    </form>

Open in new window


I have this form, I will need to change it in order to get the information if I don't post everything in an array
I added this code so far to my javascript:

		var id_mon_qty = $("#qty1").val();
		var id_tues_qty = $("#qty2").val();
		var id_wed_qty = $("#qty3").val();
		var id_thur_qty = $("#qty4").val();
		var id_fri_qty = $("#qty5").val();

		    var elements=[$("#qty1").val(),$("#qty2").val(),$("#qty3").val(),$("#qty4").val(),$("#qty5").val()].map(el=>$("#qty"+el));
		    var quantities=elements.map(el=>el.val());
		    //store them:
		    quantperproduct[meal_label_qty]=quantities;
		    //restore the new label 
		    meal_label_qty = $(this).attr("label_option");
		    elements.forEach((el,i)=>el.val((quantperproduct[meal_label_qty]||[])[i]||0));

Open in new window


There are some malfunctions, the inputs don't get all zero the first time and some changes affect the other? Is there a way to fix this code?
Is there a way to fix this code?
I still don't know what you want to do.

From what you have posted - the original image you have three buttons along the top
Tofu Beef Chicken

Under this there are three number inputs

How do the number relate to the three buttons at the top?
Does each button have it's own set of numbers
Do you add Tofu and its numbers to the cart then go back to the form and do beef or do you click Tofu and fill in its numbers , then click beef and its numbers then chicken - and when that is done only then do you add to cart.
Ok so this is what I want  I have Chicken and Beef for example
and I have 3 days
Monday    
Wednesday
Thursday
The very first time I enter the meal I have all the days to 0 since I still haven't chosen it
Lets say I want Chicken so I put
Monday                     1
Wednesday                 0
Thursday                     2
Then I click "Add-to-cart" it then enters a form where it posts this information (chicken id, along with mon, wed, thur qty)
Then I go back to that same meal I want to see that chicken is still
Monday                     1
Wednesday                 0
Thursday                     2
(Which is currently working for me)
But however if i click on Beef
I want to see
Monday                     0
Wednesday                 0
Thursday                     0
Where then I can add the qty I need and click "add-to-cart"
And if I go back to the meal I want to see chicken as
Monday                     1
Wednesday                 0
Thursday                     2
And beef as:
Monday                     2
Wednesday                 2
Thursday                     5
(the qty i added before)
I have this code so far that puts inside meal_qty (array), the id of the protien and the qty values
      
	$(".protein-option").click(function() {
	
		var meal_label_qty = $(this).attr("label_option");
		var id_mon_qty = $("#qty1").val();
		var id_tues_qty = $("#qty2").val();
		var id_wed_qty = $("#qty3").val();
		var id_thur_qty = $("#qty4").val();
		var id_fri_qty = $("#qty5").val();
		label_options.push(meal_label_qty);
		qty_options.push(id_mon_qty,id_tues_qty,id_wed_qty,id_thur_qty,id_fri_qty);
		meal_qty.push(meal_label_qty,id_mon_qty,id_tues_qty,id_wed_qty,id_thur_qty,id_fri_qty);
		alert(meal_qty);

Open in new window

So when you click add to cart you want those numbers to go back to 0?

This will do it
$('input[type="number"]').val(999);

Open in new window

- you might want to give a selector to ensure that only the input's you are targeting are affected - so either give them a class or give a common parent container a class
If you give them a class then
$('input.refreshInput').val(0);

Open in new window

If a parent container class
$('.parentClass input[type="number"]').val(0);

Open in new window


BTW in your code snippet that shows the inputs you have a <table> with no <tr> <td> children
Yes I want the numbers for the other protiens I haven't used but when I click on chicken I want it to be the numbers that I chose perviously

For example, I click on a meal, everything is 0 so I click for chicken
Monday  3
Wednesday 0
Friday 5

Then I click add to cart
I go back to that meal and click chicken I see:
Monday  3
Wednesday 0
Friday 5
But if I click on beef I see
Monday  0
Wednesday 0
Friday 0
(Since I haven't chosen beef before) , I want the numbers to change on weather or not I have chosen that meal id before and If i have to display the qty I have chosen
Ok but say you do this
Chicken 1 0 3 but you don't add to cart
Now you click beef - it clears the boxes
Change your mind again and go back to chicken - they are cleared.

This is why I was suggesting they each have their own inputs which you control the visibility of with the buttons - will that not work?
No it will only show 0 if I have't added anything for that protien
I added chicken 1 0 3 , it saves it in the array along with the chicken id, and then I click beef it shows 0 0 0 if I go back to chicken it can display 1 0 3, And if I click add to cart while Im on chicken, it adds to my cart 1 0 3 ONLY for chicken even if beef was more If i want to add another meal with beef I have to go back to the meal and and edit it but when I go back I see chicken as 1  0  3 and beef as 0 0 0 since I never chose anything to input for beef yet.
No I tried the seperate outputs, it clashed with my form and I would have to end up re-writing my entire code.
You are referencing parts of your application you know about but we don't.

If i want to add another meal with beef I have to go back to the meal
This is confusing - if you want to add another meal you go back to the meal. I think the confusion comes from the fact that you are very familiar with this code and refer to things that are obvious to you but we don't know about.

I am not familiar with your model so you need to take this one step at a time.
My model is a view of meals for example:

Soup
$10.00

Kabab
Chicken | Beef | Tofu
$10.00-$15.00

Rice with
Chicken | Beef
$15.00-$22.00

Lets say I chose before Monday and friday to deliver
So I open Rice with
I get
Rice with
Chicken  | Beef
Monday 0
Friday 0
add-to cart"
I click on chicken ==>
Rice with
Chicken  | Beef
Monday 2
Friday 3
add-to cart"
Put the qty I want and chose add to cart.
Lets say I wanted to click Rice with again, When I do I get this page instead of the previous one
Rice with
Chicken  | Beef
Monday 2
Friday 3
add-to cart"
(where chicken is selected and displayed in different color)
So I decide I want to click on beef I get this output:
Rice with
Chicken  | Beef
Monday 0
Friday 0
add-to cart"

And if I  click to chicken
This is my output
Chicken  | Beef
Monday 2
Friday 3
add-to cart"
Now if I go to beef and chose lets say this
Chicken  | Beef
Monday 1
Friday 0
add-to cart"
Then click add to cart
It will take me back to the meny page and I reclick Rice with I get this for chicken
Chicken  | Beef
Monday 2
Friday 3
add-to cart"
And this when I click on beef
Chicken  | Beef
Monday 1
Friday 0
add-to cart"
Do you get it?
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