javascript - Calculation form needed almost complete -
i have form radio buttons , checkboxes. under each radio button column of checkboxes relate radio button. looking how can hide checkboxes dont relate radio button.
also have built total calculations in form. when different radio button selected, have ckeck boxes cleared , total corrected.
here source using bootstrap cdn. can copy , paste , load browser.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>calc form</title> <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <div class="span3" > <div style="margin-left:20px; height:200px;" class="well"> <br /> <div id="subtotal">sub-total:</div> <div id="tax">tax:</div> <div id="total">total:</div><br /> </div> </div> <form id="quote" class="form-horizontal"> <div class="span8"> <table class="table table-condensed table-hover"> <thead> <tr> <th> options</th> <!-- multiple radios (inline) --> <div class="control-group"> <label class="control-label"></label> <div class="controls"> <th><label class="radio inline"> <input name="rad" value="444" onchange="calculatetotal()" checked="checked" type="radio"> <strong>1 yr</strong><br /> $444 </label> </th> <th><label class="radio inline"> <input name="rad" value="1332" onchange="calculatetotal()" checked="unchecked" type="radio"> <strong>3 yrs.</strong><br /> $1332 </label> </th> <th><label class="radio inline"> <input name="rad" value="2220" onchange="calculatetotal()" checked="unchecked" type="radio"> <strong>5 yrs.</strong><br /> $2220 </label> </th> <th><label class="radio inline"> <input name="rad" value="2995" onchange="calculatetotal()" checked="unchecked" type="radio"> <strong>ultimate</strong><br /> $2995 </label> </th> </div> </div> </tr> </thead> <tbody> <tr> <td>plus</td> <td><label class="checkbox"> <input name="checkboxes" class="type-group type-group-1yr" value="35" type="checkbox" onchange="calculatetotal()" > + $35 </label></td> <td><label class="checkbox"> <input name="checkboxes" class="type-group type-group-3yr" value="105" type="checkbox" onchange="calculatetotal()" > + $105 </label></td> <td><label class="checkbox"> <input name="checkboxes" class="type-group type-group-5yr" value="175" type="checkbox" onchange="calculatetotal()" > + $175 </label></td> <td>free</td> </tr> <tr> <td>helicopter option</td> <td><label class="checkbox"> <input name="checkboxes" class="type-group type-group-1yr" value="75" type="checkbox" onchange="calculatetotal()" > + $75 </label></td> <td><label class="checkbox"> <input name="checkboxes" class="type-group type-group-3yr" value="225" type="checkbox" onchange="calculatetotal()" > + $225 </label></td> <td><label class="checkbox"> <input name="checkboxes" class="type-group type-group-5yr" value="375" type="checkbox" onchange="calculatetotal()" > + $375 </label></td> <td>free</td> </tr> <tr> <td>pdd option</td> <td><label class="checkbox"> <input name="checkboxes" class="type-group type-group-1yr" value="75" type="checkbox" onchange="calculatetotal()" > + $75 </label></td> <td><label class="checkbox"> <input name="checkboxes" class="type-group type-group-3yr" value="225" type="checkbox" onchange="calculatetotal()" > + $225 </label></td> <td><label class="checkbox"> <input name="checkboxes" class="type-group type-group-5yr" value="375" type="checkbox" onchange="calculatetotal()" > + $375 </label></td> <td>free</td> </tr> <tr> <td>ground ambulance option</td> <td><label class="checkbox"> <input name="checkboxes" class="type-group type-group-1yr" value="75" type="checkbox" onchange="calculatetotal()" > + $75 </label></td> <td><label class="checkbox"> <input name="checkboxes" class="type-group type-group-3yr" value="225" type="checkbox" onchange="calculatetotal()" > + $225 </label></td> <td><label class="checkbox"> <input name="checkboxes" class="type-group type-group-5yr" value="375" type="checkbox" onchange="calculatetotal()" > + $375 </label></td> <td>free</td> </tr> <tr> <td>100 mile waiver option</td> <td><label class="checkbox"> <input name="checkboxes" class="type-group type-group-1yr" value="95" type="checkbox" onchange="calculatetotal()" > + $95 </label></td> <td><label class="checkbox"> <input name="checkboxes" class="type-group type-group-3yr" value="285" type="checkbox" onchange="calculatetotal()" > + $285 </label></td> <td><label class="checkbox"> <input name="checkboxes" class="type-group type-group-5yr" value="475" type="checkbox" onchange="calculatetotal()" > + $475 </label></td> <td>free</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <p class="text-right"> <button class="btn btn-primary">continue>></button> </p> </div> </form> </div> <script> function calculatetotal() { var subtotalfield = document.getelementbyid("subtotal"); var mycalc = document.forms["quote"].getelementsbytagname("input"); var subtotal = 0; var tax = 0; var total = 0; (var = 0, length = mycalc.length; < length; i++) { if (mycalc[i].checked) { subtotal += parseint(mycalc[i].value); } } tax = (subtotal * .09).tofixed(2); total = (parsefloat(subtotal) + parsefloat(tax)).tofixed(2); document.getelementbyid("subtotal").innerhtml = "sub-total: $" + subtotal; document.getelementbyid("tax").innerhtml = "tax: $" + tax; document.getelementbyid("total").innerhtml = "total: $" + total; }; </script>> </body> </html>
in order hide elements on page use css. wrapping html in div id (for use javascript) , default class.
<style> div.one {display: none;} div.three {display: none;} div.five {display: none;} div.unlim {display: none;} div.div_one div.one {display: block;} div.div_three div.three {display:block;} div.div_five div.five {display:block;} div.div_unlim div.unlim {display:block;} </style> to work have wrap want hide in div tags well. in case you'd wrap stuff inside tds in divs. here sample of code modified:
<div id="mydiv" class="div_unlim"> <div class="span8"> <table class="table table-condensed table-hover" id="mytable"> <thead> <tr> <th> options</th> <!-- multiple radios (inline) --> <div class="control-group"> <label class="control-label"></label> <div class="controls"> <th><label class="radio inline"> <input name="rad" value="444" onchange="calculatetotal('one')" checked="checked" type="radio" class="one"> <strong>1 yr</strong><br /> $444 </label> </th> <th><label class="radio inline"> <input name="rad" value="1332" onchange="calculatetotal('three')" checked="unchecked" type="radio" class="three"> <strong>3 yrs.</strong><br /> $1332 </label> </th> <th><label class="radio inline"> <input name="rad" value="2220" onchange="calculatetotal('five')" checked="unchecked" type="radio" class="five"> <strong>5 yrs.</strong><br /> $2220 </label> </th> <th><label class="radio inline"> <input name="rad" value="2995" onchange="calculatetotal('unlim')" checked="unchecked" type="radio" class="unlim"> <strong>ultimate</strong><br /> $2995 </label> </th> </div> </div> </tr> </thead> <tbody> <tr> <td>plus</td> <td><div class="one"><label class="checkbox"> <input name="checkboxes" class="type-group type-group-1yr" value="35" type="checkbox" onchange="calculatetotal('one')" > + $35 </label></div></td> <td><div class="three"><label class="checkbox" class="three"> <input name="checkboxes" class="type-group type-group-3yr" value="105" type="checkbox" onchange="calculatetotal('three')" > + $105 </label><div></td> <td><div class="five"><label class="checkbox" class="five"> <input name="checkboxes" class="type-group type-group-5yr" value="175" type="checkbox" onchange="calculatetotal('five')" > + $175 </label></div></td> <td><div class="unlim"><label class="unlim">free</label></div></td> </tr> </tbody> </table> <p class="text-right"> <button class="btn btn-primary">continue>></button> </p> </div> </div> basically wrapped in class 'one' visible when wrapping div has class 'div_one'.
you can use input class decide whether add total. javascript become:
<script type="text/javascript"> function calculatetotal(cls) { var mydiv = document.getelementbyid('mydiv'); mydiv.classname = "div_" + cls; var subtotalfield = document.getelementbyid("subtotal"); var mycalc = document.forms["quote"].getelementsbytagname("input"); var subtotal = 0; var tax = 0; var total = 0; (var = 0, length = mycalc.length; < length; i++) { if (mycalc[i].checked ) { if( mydiv.classname == "div_" + mycalc[i].classname ) subtotal += parseint(mycalc[i].value); else { switch( mydiv.classname ) { case "div_one": if( mycalc[i].classname == "type-group type-group-1yr" ) subtotal += parseint(mycalc[i].value); break; case "div_three": if( mycalc[i].classname == "type-group type-group-3yr" ) subtotal += parseint(mycalc[i].value); break; case "div_five": if( mycalc[i].classname == "type-group type-group-5yr" ) subtotal += parseint(mycalc[i].value); break; } } } } tax = (subtotal * .09).tofixed(2); total = (parsefloat(subtotal) + parsefloat(tax)).tofixed(2); document.getelementbyid("subtotal").innerhtml = "sub-total: $" + subtotal; document.getelementbyid("tax").innerhtml = "tax: $" + tax; document.getelementbyid("total").innerhtml = "total: $" + total; }; </script> note doesn't un-check checkboxes exclude them calculations.
Comments
Post a Comment