need to select options from list, sum values and display system (PDF or web page) that meets their needs

Question

We want to create a page where you choose from a table electrical appliances that you could offset with solar and we provide a system that meets their needs. This should be simple but I can not find the best way to do everything efficiently.

They select which they want to replace with solar, we capture just the watts of the items they select and sum. then use an if-else statement to display the system that produces the necessary energy.

The sum is working on screen but not being accessed by if else statement and if you select all 4 appliances the math rounds the number to an repeating number. If you could help to point me in the right direction, im sure I have arguments grouped under the wrong headers.

Next is how to call up a PDF or web page with the specification for the correct solar system (2, 3, 4... module system)

<script>

function update(form) {
  var total = 0;
  var el;

  for (var i=0, iLen=form.elements.length; i<iLen; i++) {
    el = form.elements[i];
    if (el.type == 'checkbox') {
      total += el.checked? +el.value : 0;
    }
  }
  form.total.value = total;
}

</script>

<form onclick="update(this);">
<table width="550" border="1">
  <tr>
    <th scope="col">Appliance</th>
    <th scope="col">Watts / Mo</th>
    <th scope="col">Offset This?</th>
  </tr>
  <tr>
    <th scope="row">bose wave</th>
    <td>8.76</td>
    <td><input name="Bose Wave" type="checkbox" value="8.76"></td>
  </tr>
  <tr>
<th scope="row">Cable/Sat Box</th>
<td>32.85</td>
<td><input name="Cable/Sat box" type="checkbox" value="32.85"></td>
  </tr>
  <tr>
    <th scope="row">Desktop Computer/Monitor</th>
    <td>142.35</td>
    <td><input name="Desktop Computer/Monitor" type="checkbox" value="142.35"></td>
  </tr>
  <tr>
    <th scope="row">xBox 360</th>
    <td>14.65</td>
    <td><input name="xBox 360" type="checkbox" value="14.65"></td>
  </tr>
  <tr>
    <th scope="row">Total</th>
    <td colspan="2"><input type="text" name="total" readonly></td>
  </tr>
</table>
<script>
var x=""
var total=totaloffset
if (total < 75) 
   {
      x="use 2 module system";
   }else if (total < 115){
      x="use 3 module system";
    }else if (total < 160){
       x="use 4 module system";
    }else if (totalOffset < 188){
       trace ("use 5 module system");
    }else if (totalOffset < 227){
       trace ("use 6 module system");
    }else if (totalOffset < 265){
       trace ("use 7 module system");
    }else if (totalOffset < 303){
       trace ("use 8 module system");
    }else if (totalOffset < 341){
       trace ("use 9 module system");
    }else if (totalOffset < 379){
       trace ("use 10 module system");
    }else {
        x="use 11+ module system, Contact us for sizing";
}
document.getElementById("Total").innerHTML+=val;

</script>
</form>

<script type="text/javascript">
function MM_changeProp(Total,x,theProp,theValue) { //v9.0
  var obj = null; with (document){ if (getElementById)
  obj = getElementById(Total); }
  if (obj){
    if (theValue == true || theValue == false)
      eval("obj.style."+theProp+"="+theValue);
    else eval("obj.style."+theProp+"='"+theValue+"'");  }}
</script>

    <script type="text/javascript">
function insertText(val,total){
document.getElementById(total).innerHTML+=val;
}

</script>

<script>

function update(form) {
  var total = 0;
  var el;
  var totalOffset;

  for (var i=0, iLen=form.elements.length; i<iLen; i++) {
    el = form.elements[i];
    if (el.type == 'checkbox') {
      total += el.checked? +el.value : 0;
    }




  if (total < 75) {
      trace("use 2 module system");
    }else if (total < 115)
      trace("use 3 module system");
    }else if (totalOffset < 160)
       trace ("use 4 module system");
    }else if (totalOffset < 188)
       trace ("use 5 module system");
    }else if (totalOffset < 227)
       trace ("use 6 module system");
    }else if (totalOffset < 265)
       trace ("use 7 module system");
    }else if (totalOffset < 303)
       trace ("use 8 module system");
    }else if (totalOffset < 341)
       trace ("use 9 module system");
    }else if (totalOffset < 379)
       trace ("use 10 module system");
    }else if 0
       trace ("use 11+ module system, Contact us for sizing)

</script>
  <br />
  <br />
  <br />
  </p>
</form>

Answer 1

It is easiest to access form controls if they are in a form. Also, the value should be the value attribute of the checkbox to make it easier to add them up. Then you just need a simple function to loop over the checkboxes and get the total, e.g.:

<script>

function update(form) {
  var total = 0;
  var el;

  for (var i=0, iLen=form.elements.length; i<iLen; i++) {
    el = form.elements[i];
    if (el.type == 'checkbox') {
      total += el.checked? +el.value : 0;
    }
  }
  form.total.value = total;
}

</script>

<form onclick="update(this);">
<table width="200" border="1">
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Watts</th>
    <th scope="col">Offset?</th>
  </tr>
  <tr>
    <th scope="row">clock</th>
    <td>2</td>
    <td><input name="Clock" type="checkbox" value="2"></td>
  </tr>
  <tr>
<th scope="row">Radio</th>
<td>9</td>
<td><input name="Radio" type="checkbox" value="9"></td>
  </tr>
  <tr>
    <th scope="row">Fan</th>
    <td>8</td>
    <td><input name="Fan" type="checkbox" value="8"></td>
  </tr>
  <tr>
    <th scope="row">lights</th>
    <td>44</td>
    <td><input name="Lights" type="checkbox" value="44"></td>
  </tr>
  <tr>
    <th scope="row">Total</th>
    <td colspan="2"><input type="text" name="total" readonly></td>
  </tr>
</table>
</form>

You can then add a submit button to the form so a user can submit their choices.