1 Replies - 687 Views - Last Post: 01 October 2012 - 01:55 PM

#1 justin_k  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 28-May 12

Adding checked checkbox values

Posted 01 October 2012 - 01:44 PM

Hello, I'm doing this code for a Capstone Web Application (J2EE) project, and I am trying to use a form to calculate the total price of all selected services based on whether the values are checked or not. Being strictly a Java/HTML/CSS programmer I haven't stepped into much JS so I was wondering if anyone could show me how to go about this. I know the JS I already have is a little jacked up, but any tips on how to finish it off would be great. Thank You. Here is the code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <title>Services</title>
   <link rel="stylesheet" type="text/css" href="main.css" />
   <script>
       function calculateTotal(){
       var total;
        var theForm = document.forms["optionform"]; {
        var selectedServices = theFrom.elements["selectedServices"];
        var servicePrices = new Array();
        servicePrices["Oil and Filter Change"]= 21.00;
        servicePrices["Mini-Service"]= 35.00;
        servicePrices["Tire Rotation and Balance"]= 45.00;
        servicePrices["Major Service 4 cyl"]= 125.00;
        servicePrices["Minor Service 4 cyl"]= 100.00;
        servicePrices["Major Service 6 cyl"]= 150.00;
        servicePrices["Minor Service 6 cyl"]= 120.00;
        servicePrices["Brake Services"]= 50.00;
        servicePrices["Standard Car Wash"]= 20.00;
        servicePrices["Car Detailing"]= 90.00;
        servicePrices["Engine Change Out"]= 800.00;
       }
        $(document).ready(function() {
  
        $('input[type="checkbox"]').live('change', function() {
        calculateTotal();
    });
    });
   </script>
  </head>
    <body>
      <div id="container">
	<div id="header">
	  <p>Motor City Repair Services Menu</p>
	</div><!--end header-->
           <div id="optionform">
	     <p align="center">Choose Services From the Menu:</p>
               <form>
                <span><input type="checkbox" name="Oil and Filter Change" onclick="calculateTotal()">Oil and Filter Change: $21.00</span><br />
                <span><input type="checkbox" name="Mini-Service" onclick="calculateTotal()">Mini-Service: $35.00</span><br />
                <span><input type="checkbox" name="Tire Rotation and Balance" onclick="calculateTotal()">Tire Rotation and Balance: $45.00</span><br />    
                <span><input type="checkbox" name="Major Service 4 cyl">Major Service 4 cyl: Parts + Labor</span><br />
                <span><input type="checkbox" name="Minor Service 4 cyl">Minor Service 4 cyl: Parts + Labor</span><br />
                <span><input type="checkbox" name="Major Service 6 cyl">Major Service 6 cyl: Parts + Labor</span><br />
                <span><input type="checkbox" name="Minor Service 6 cyl">Minor Service 6 cyl: Parts + Labor</span><br />
                <span><input type="checkbox" name="Break Service">Break Service: $50.00</span><br />
                <span><input type="checkbox" name="Standard Car Wash">Standard Car Wash: $20.00</span><br />
                <span><input type="checkbox" name="Car Detailing">Car Detailing: $90.00</span><br />
                <span><input type="checkbox" name="Engine Change Out">Engine Change Out: Parts + Labor</span><br />
                <span><input type="submit" name="submit" value="Submit" /></span>
               </form>
             <p>
                Total: <span class="total"></span>
             </p>
	    </div><!--end optionform-->
	<div id="footer">
	 <p>Developed by Quality Code</p>
	</div>
  </div><!--end container-->
</body>
</html>



And yes, I misspelled form in "theFrom.elements". It has been fixed.

Is This A Good Question/Topic? 0
  • +

Replies To: Adding checked checkbox values

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3550
  • View blog
  • Posts: 10,324
  • Joined: 08-June 10

Re: Adding checked checkbox values

Posted 01 October 2012 - 01:55 PM

essentially, the principle is easy: get all checked boxes, convert the values to Number and add them up. the problem is how far you want to support old browsers. where supported, it could be as easy as document.querySelectorAll("input:checked") up to manually filtering the elements (for which there is a whole range from Array.filter() via .call() to individual checks in a loop).


PS. don’t make the mistake to reason from Java to Javascript, both are completely different.

This post has been edited by Dormilich: 01 October 2012 - 01:57 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1