www.webdeveloper.com
Results 1 to 2 of 2

Thread: option calculator form

  1. #1
    Join Date
    Aug 2010
    Posts
    4

    option calculator form

    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.

    Code:
    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>

    HTML Code:
    <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

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Exclamation Clarification please ...

    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:
    Code:
    <style type="text/css">
      .td { height:21px; }
    </style>
    or possibly include it in the definition of the 'bodytext' class (? not included in post)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles