mardi 26 avril 2016

When user checks the checkboxs it toggles class / displays you have on a review page

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