i stuck on do, display value "large pizza £5.50" in basket div. problem have 2 java codes, 1 @ least 1 must ticked , display order total in basket. how can display order total , description each box ticked in basket too. have value assigned each price don't know go next. new javascript if make working version "the javascript code" grateful.
below code relevant not complete page. there 14 checkboxes in total shown in javascript.
<script type="text/javascript"> function validatefunction() { var fo = document.formname; if (!fo.field1.checked && !fo.field2.checked && !fo.field3.checked && !fo.field4.checked && !fo.field5.checked && !fo.field6.checked && !fo.field7.checked && !fo.field8.checked && !fo.field9.checked && !fo.field10.checked && !fo.field11.checked && !fo.field12.checked && !fo.field13.checked && !fo.field14.checked) { alert("you must select @ least 1 option."); return false; } return true; } function totalit() { var input = document.getelementsbyclassname("product"); var total = 0; (var = 0; < input.length; i++) { if (input[i].checked) { total += parsefloat(input[i].value); } } document.getelementbyid("total").value = "£" + total.tofixed(2); } </script> <form name="formname" id="payment" onsubmit="return validatefunction();"> <!-- select pizza section --> <fieldset> <legend> select pizza </legend> <p> <input type="checkbox" name="field1" class="product" value="5.50" onclick="totalit()" /> small £5.50</p> <p> <input type="checkbox" name="field2" class="product" value="8.50" onclick="totalit()" /> medium £8.50</p> <p> <input type="checkbox" name="field3" class="product" value="11.50" onclick="totalit()" /> large £11.50</p> </fieldset> <div id="basket"> <h3> basket </h3> <p>order total <input value="£0.00" readonly="readonly" type="text" id="total" /> </p> </div>
if using newer browsers can use datasets: codepen
<script type="text/javascript"> function validatefunction() { var fo = document.formname; if (!fo.field1.checked && !fo.field2.checked && !fo.field3.checked && !fo.field4.checked && !fo.field5.checked && !fo.field6.checked && !fo.field7.checked && !fo.field8.checked && !fo.field9.checked && !fo.field10.checked && !fo.field11.checked && !fo.field12.checked && !fo.field13.checked && !fo.field14.checked) { alert("you must select @ least 1 option."); return false; } return true; } function totalit() { var input = document.getelementsbyclassname("product"); var total = 0; var contents = ""; (var = 0; < input.length; i++) { if (input[i].checked) { var article = input[i]; total += parsefloat(article.value); contents += article.dataset.desc + '<br/>'; } } document.getelementbyid("contents").innerhtml = contents; document.getelementbyid("total").value = "£" + total.tofixed(2); } </script> <form name="formname" id="payment" onsubmit="return validatefunction();"> <!-- select pizza section --> <fieldset> <legend> select pizza </legend> <p> <input type="checkbox" data-desc="foo" name="field1" class="product" value="5.50" onclick="totalit()" /> small £5.50</p> <p> <input type="checkbox" data-desc="bar" name="field2" class="product" value="8.50" onclick="totalit()" /> medium £8.50</p> <p> <input type="checkbox" data-desc="bam" name="field3" class="product" value="11.50" onclick="totalit()" /> large £11.50</p> </fieldset> <div id="basket"> <h3> basket </h3> <div id="contents"> </div> <p>order total <input value="£0.00" readonly="readonly" type="text" id="total" /> </p> </div> 
Comments
Post a Comment