lundi 30 juillet 2018

PHP JavaScript Handling Checkbox values to add to shopping cart

I am trying to add the (Demo: Handling Checkbox Group) functionality shown in this website to my movie booking website. My initial value is $0.50 booking fee. But it doesnt seem to be responding when I click the checkbox. I'm hoping a fresh pair of eyes might help spot errors. Also, I'm a super beginner and JavaScript is my Kryptonite.

// check boxes containing ticket price and seat information

                      echo "<td> <form method=\"post\"action=\"seats.php\"><input type="
                  . "\"hidden\" name=\"performanceSeat\" value=\"". $row['RowNumber'] . "\">
                <input type=\"checkbox\" name=\"performancePrice\" value=". $row['CalculatedPrice'] ." />
                     </form>
</td>



                 "</tr>";

           }


                echo "</table>";

           }



           else {
               echo "0 results";
            }
           $conn->close();

           ?>



              //Calculated Price should add on here when checkbox is ticked
              <p id="totalPrice">
        <label>Total: $ <input type="text" name="total" class="num" size="6" value="0.00" readonly="readonly" /></label>
    </p>





    <form method="post" action="book.php"> Enter Email address: <input type="text" name="email">
    <input type="hidden" name ="sell_item_id" value="$_GET[iten_id]"/>
    <button type="submit" value="submit"> Add to cart </button>
    <button type="submit" value="submit" onclick="function()"> Total up </button>
</form>


    <script>
   document.getElementById('performancePrice').onclick = function() {
    // access properties using this keyword
    if ( this.RowNumber ) {
        // if checked ...
        alert( this.CalculatedPrice);
    } else {
        echo "nothing ticked"; 
    }
}; 

             // call onload or in script segment below form
        function attachCheckboxHandlers() {
            // get reference to element containing toppings checkboxes
            var el = document.getElementById('performancePrice');

            // get reference to input elements in toppings container element
            var tops = el.getElementsByTagName('performanceSeat');

            // assign updateTotal function to onclick property of each checkbox
            for (var i=0, len=tops.length; i<len; i++) {
                if ( tops[i].type === 'checkbox' ) {
                    tops[i].onclick = updateTotal;
                }
            }
        }


// called onclick of toppings checkboxes
function updateTotal(e) {
    // 'this' is reference to checkbox clicked on
    var form = this.form;

    // get current value in total text box, using parseFloat since it is a string
    var val = parseFloat( form.elements['total'].value );

    // if check box is checked, add its value to val, otherwise subtract it
    if ( this.performancePrince ) {
        val += parseFloat(this.CalculatedPrice);
    } else {
        val -= parseFloat(this.CalculatedPrice);
    }

    // format val with correct number of decimal places
    // and use it to update value of total text box
    form.elements['total'].value = formatDecimal(val);
}

// format val to n number of decimal places
// modified version of Danny Goodman's (JS Bible)
function formatDecimal(val, n) {
    n = n || 2;
    var str = "" + Math.round ( parseFloat(val) * Math.pow(10, n) );
    while (str.length <= n) {
        str = "0" + str;
    }
    var pt = str.length - n;
    return str.slice(0,pt) + "." + str.slice(pt);
}

// in script segment below form
attachCheckboxHandlers();


   </script> 




Aucun commentaire:

Enregistrer un commentaire