option calculator form

[deanomcd]

Hey all,

Could anybody help me with some code issues I have. I am trying to make an option calculator for my site. The user will click on various radio buttons and checkboxes, before pressing the calculate button. The button will then add up all the values to show the overall figure. The code shown below is what I have so far.

function calcMe()
{
for (var i=0; i < document.form.radio.length; i++)
   {
   if (document.form.radio[i].checked)
   {
   var rad_val = document.form.radio[i].value;
   }
   }
   if (document.form.radio1.checked) { 
   document.form.result.value = rad_val; 
   }
   if (document.form.radio2.checked) 
   { 
   A = document.form.input1.value
   B = (A * rad_val)
   document.form.result.value = B;  
   }
   if (document.form.radio3.checked) { 
   C = document.form.input2.value
   D = (C * rad_val)
   document.form.result.value = D;  
   }
}

//-->
</script>
<script type="text/javascript">
function getScore(form) {
  // get the form elements
  var elems = form.elements;
  // create a variable for the score
  var score = 0;

  // loop through the form elements to find checked radio buttons & checkboxes
  for (var i = 0; i < elems.length; i++) {
    if (elems[i].type == "radio" && elems[i].checked){
      // convert the value to a number and add it to the score
      score += Number(elems[i].value);
    }
	if (elems[i].type == "checkbox" && elems[i].checked){
      // convert the value to a number and add it to the score
      score += Number(elems[i].value);
    }
  }
}
</script>

<tr>
    <td height="21" colspan="2" class="bodytext"><strong class="bodytexttitle">Graphics</strong></td>
    </tr>
  <tr>
    <td height="21" class="bodytext"><input name="graphics" type="radio" id="graphics1" value="0" checked="checked" /></td>
    <td height="21" class="bodytext">no graphics</td>
  </tr>
  <tr>
    <td height="21" class="bodytext"><input name="graphics" id="graphics2" value="45" type="radio" /></td>
    <td height="21" class="bodytext">integrated</td>
  </tr>
  <tr>
    <td height="21" class="bodytext"><input name="graphics" id="graphics3" value="90" type="radio" /></td>
    <td height="21" class="bodytext">minor customization</td>
  </tr>
  <tr>
    <td height="21" class="bodytext"><input name="graphics" id="graphics4" value="180" type="radio" /></td>
    <td height="21" class="bodytext">major customization</td>
  </tr>
  <tr>
    <td height="21" class="bodytext"><input name="graphics" id="graphics5" value="360" type="radio" /></td>
    <td height="21" class="bodytext">custom design</td>
  </tr>
  <tr>
    <td height="5" colspan="2">&nbsp;</td>
    </tr>
  <tr>
    <td height="21" colspan="2" class="bodytext"><strong class="bodytexttitle">Other Graphics</strong></td>
    </tr>
  <tr>
    <td height="21" class="bodytext"><input name="other" type="checkbox" id="other1" value="45" /></td>
    <td height="21" class="bodytext">interactive</td>
  </tr>
  <tr>
    <td height="21" class="bodytext"><input name="other" id="other2" value="30" type="radio" /></td>
    <td height="21" class="bodytext">few photos</td>
  </tr>
  <tr>
    <td height="21" class="bodytext"><input name="other" id="other3" value="60" type="radio" /></td>
    <td height="21" class="bodytext">several photos</td>
  </tr>
  <tr>
    <td height="21" class="bodytext"><input name="other" type="checkbox" id="other4" value="180" /></td>
    <td height="21" class="bodytext">Request A Brochure</td>
  </tr>
  <tr>
    <td height="21" class="bodytext"><input name="other" type="checkbox" id="other5" value="360" /></td>
    <td height="21" class="bodytext">custom</td>
  </tr>
  <tr>
    <td height="5" colspan="2">&nbsp;</td>
    </tr>
  <tr>
    <td height="21" colspan="2" class="bodytext"><strong class="bodytexttitle">Flash</strong></td>
    </tr>
  <tr>
    <td height="21" class="bodytext"><input name="flash" type="checkbox" id="flash1" value="90" /></td>
    <td height="21" class="bodytext">menu</td>
  </tr>
  <tr>
    <td height="21" class="bodytext"><input name="flash" type="checkbox" id="flash2" value="90" /></td>
    <td height="21" class="bodytext">banner</td>
  </tr>
  <tr>
    <td height="21" class="bodytext"><input name="flash" type="checkbox" id="flash3" value="90" /></td>
    <td height="21" class="bodytext">slideshow</td>
  </tr>
  <tr>
    <td height="5" colspan="2">&nbsp;</td>
    </tr>
  <tr>
    <td height="21" colspan="2" class="bodytext"><strong class="bodytexttitle">Pages</strong></td>
  </tr>
  <tr>
    <td height="21" class="bodytext"><input name="pages" type="radio" id="pages1" value="10" checked="checked" /></td>
    <td height="21" class="bodytext">I want <input name="pages" type="text" id="pages2" size="3" maxlength="2" /> pages</td>
  </tr>
  <tr>
    <td height="5" colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td height="21" colspan="2" class="bodytext"><strong class="bodytexttitle">Content</strong></td>
  </tr>
  <tr>
<td height="21"><input name="radio" type="radio" id="radio1" value="0" checked="CHECKED"></td>
<td height="21" class="bodytext">content manager</td>
</tr>
<tr>
  <td height="21" class="bodytext">
    <input name="radio" type="radio" id="radio2" value="10">
  </td>
  <td height="21" class="bodytext">I will supply
    <input name="input1" id="input1" value="0" size="3">
    pages</td>
</tr>
<tr>
  <td height="21"><input name="radio" id="radio3" value="30" type="radio"></td>
  <td height="21" class="bodytext">I will supply
    <input name="input2" id="input2" value="0" size="3">
    pages on sheets</td>
<input name="calc" type="button" class="calculatorsubmitbutton" id="calc" onclick="calcMe();" value="Calculate">

The first javascript is to show the value of the radio button with the textfield attached - when the user puts a number in the textfield, it will update the value of the radio button.

The second javascript is to check the document for the clicked radio buttons and checkboxes. It then adds up all the clicked values to show the answer.

The problem that I am having is to put these two javascripts together so as the radio button is updated with the text field value as well as adding up all the clicked values

[JMRKER]

Couple of problems to clear up for me:

1. You reference a 'document.form', but you have no <form> tag I can find.
2. You reference a 'radio1' value that looks to have a value of zero, but then try to calculate with it in a multiplications formula.
3. You reference a 'document.form.result.value', but I don't see 'result' defined in the HTML
4. You create a 'getScore(form)' function, but I see no other reference to it's use.

BTW, you can probably remove the 'height="21" in the <td> calls and replace it with:

<style type="text/css">
  .td { height:21px; }
</style>

or possibly include it in the definition of the 'bodytext' class (? not included in post)