as you can see below with PHP I am creating a long list of label and input tags to make a simple shop with HTML checkbox buttons.
PHP CREATING HTML CODE
<?php
foreach ($toppingItems as $item) {
echo '<label class="hover topping" for="c'.$item['number'].'"><input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c'.$item['number'].'">'.$item['title'].'</label>';
}
?>
ARRAY's
<?php
// Navigation Menu Items
$toppingItems = array(
array(
"number" => "4",
"title" => "BABYBEL"
),
array(
"number" => "5",
"title" => "TOMATOES"
),
array(
"number" => "6",
"title" => "OLIVES"
),
array(
"number" => "7",
"title" => "MUSHROOMS"
),
array(
"number" => "8",
"title" => "CHICKEN"
),
array(
"number" => "9",
"title" => "MOZZARELLA"
),
array(
"number" => "10",
"title" => "SALAMI"
),
array(
"number" => "11",
"title" => "ONIONS"
),
array(
"number" => "12",
"title" => "PEPPERONI"
),
array(
"number" => "13",
"title" => "STUFFED CRUST"
),
array(
"number" => "14",
"title" => "MEATBALLS"
),
array(
"number" => "15",
"title" => "BACON"
),
array(
"number" => "16",
"title" => "HAM"
),
array(
"number" => "17",
"title" => "SHRIMPS"
),
);
ONE EXAMPLE OF THE OUTCOME IN STATIC HTML
<label class="hover topping" for="c4">
<input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c4">
BABYBEL
</label>
So above is all working and I have a Jquery system that adds up all the variables to create a final total.
JQUERY CODE
function findTotal() {
var items = new Array();
var itemCount = document.getElementsByClassName("items");
var total = 0;
var id = '';
for (var i = 0; i < itemCount.length; i++) {
id = "c" + (i + 1);
if (document.getElementById(id).checked) {
total = total + parseInt(document.getElementById(id).value);
}
}
console.log(total);
document.getElementById('displayTotal').value = total;
}
Now I've got all of that working I need a way to display they are checked such as toggleing a class, if you have any suggestions that would be great.
As you can see this is looking like a shop but I can't seem to come up with a method to review their order by displaying their checked checkboxes (on the same page).
Thank you for your time.
Aucun commentaire:
Enregistrer un commentaire