Simple addition on a web form

JonChuck · #1 (**permalink**) 03-10-10, 09:43 PM

I have a form that contains the following html. The individual check boxes each contain a numerical value. Can somebody please provide me a JavaScript that will allow this form to add the individual values for all the check boxes that are "checked" at the time of submission and put them in the field named "total". You can see this page by clicking this link.

Code:

<form>
<table width="100%" border="0" cellspacing="1" cellpadding="1">
  <tr>
    <td width="5%" align="center" valign="top">&nbsp;</td>
    <td width="30%" align="left" valign="top">EVENTS</td>
    <td width="15%" align="center" valign="top">SCALE</td>
    <td width="5%" align="center" valign="top">&nbsp;</td>
    <td width="30%" align="left" valign="top">EVENTS</td>
    <td width="15%" align="center" valign="top">SCALE</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="one" type="checkbox" value="100" /></td>
    <td align="left" valign="top">Death of a spouse</td>
    <td align="center" valign="top">100</td>
    <td align="center" valign="top"><input name="eighteen" type="checkbox" id="eighteen" value="29" /></td>
    <td align="left" valign="top">Son or daughter leaving home</td>
    <td align="center" valign="top">29</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="two" type="checkbox" id="two" value="65" /></td>
    <td align="left" valign="top">Marital separation</td>
    <td align="center" valign="top">65</td>
    <td align="center" valign="top"><input name="nineteen" type="checkbox" id="nineteen" value="29" /></td>
    <td align="left" valign="top">Trouble with inlaws</td>
    <td align="center" valign="top">29</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="three" type="checkbox" id="three" value="53" /></td>
    <td align="left" valign="top">Death of a close relative</td>
    <td align="center" valign="top">53</td>
    <td align="center" valign="top"><input name="twenty" type="checkbox" id="twenty" value="28" /></td>
    <td align="left" valign="top">Outstanding personal achievement</td>
    <td align="center" valign="top">28</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="four" type="checkbox" id="four" value="53" /></td>
    <td align="left" valign="top">Personal injury or illness</td>
    <td align="center" valign="top">53</td>
    <td align="center" valign="top"><input name="twentyone" type="checkbox" id="twentyone" value="26" /></td>
    <td align="left" valign="top">Spouse begins or stops work</td>
    <td align="center" valign="top">26</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="five" type="checkbox" id="five" value="50" /></td>
    <td align="left" valign="top"> Marriage</td>
    <td align="center" valign="top">50</td>
    <td align="center" valign="top"><input name="twentytwo" type="checkbox" id="twentytwo" value="24" /></td>
    <td align="left" valign="top">Revision of personal habits</td>
    <td align="center" valign="top">24</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="six" type="checkbox" id="six" value="47" /></td>
    <td align="left" valign="top">Loss of a job</td>
    <td align="center" valign="top">47</td>
    <td align="center" valign="top"><input name="twentythree" type="checkbox" id="twentythree" value="23" /></td>
    <td align="left" valign="top">Foreclosure of mortgage</td>
    <td align="center" valign="top">23</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="seven" type="checkbox" id="seven" value="45" /></td>
    <td align="left" valign="top">Marital reconciliation</td>
    <td align="center" valign="top">45</td>
    <td align="center" valign="top"><input name="twentyfour" type="checkbox" id="twentyfour" value="20" /></td>
    <td align="left" valign="top">Trouble with business superior</td>
    <td align="center" valign="top">20</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="eight" type="checkbox" id="eight" value="45" /></td>
    <td align="left" valign="top">Retirement</td>
    <td align="center" valign="top">45</td>
    <td align="center" valign="top"><input name="twentyfive" type="checkbox" id="twentyfive" value="20" /></td>
    <td align="left" valign="top">Change in work hours</td>
    <td align="center" valign="top">20</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="nine" type="checkbox" id="nine" value="44" /></td>
    <td align="left" valign="top">Change in health of a relative</td>
    <td align="center" valign="top">44</td>
    <td align="center" valign="top"><input name="twentysix" type="checkbox" id="twentysix" value="20" /></td>
    <td align="left" valign="top">Change in residence</td>
    <td align="center" valign="top">20</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="ten" type="checkbox" id="ten" value="40" /></td>
    <td align="left" valign="top">Pregnancy</td>
    <td align="center" valign="top">40</td>
    <td align="center" valign="top"><input name="twentyseen" type="checkbox" id="twentyseen" value="20" /></td>
    <td align="left" valign="top">Change in school</td>
    <td align="center" valign="top">20</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="eleven" type="checkbox" id="eleven" value="39" /></td>
    <td align="left" valign="top">Sex difficulties</td>
    <td align="center" valign="top">39</td>
    <td align="center" valign="top"><input name="twentyeight" type="checkbox" id="twentyeight" value="19" /></td>
    <td align="left" valign="top">Change in recreation</td>
    <td align="center" valign="top">19</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="twelve" type="checkbox" id="twelve" value="39" /></td>
    <td align="left" valign="top">New family member</td>
    <td align="center" valign="top">39</td>
    <td align="center" valign="top"><input name="twentynine" type="checkbox" id="twentynine" value="18" /></td>
    <td align="left" valign="top">Change in social activities</td>
    <td align="center" valign="top">18</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="thirteen" type="checkbox" id="thirteen" value="38" /></td>
    <td align="left" valign="top">Change in financial status</td>
    <td align="center" valign="top">38</td>
    <td align="center" valign="top"><input name="thirty" type="checkbox" id="thirty" value="18" /></td>
    <td align="left" valign="top">Taking out a small loan</td>
    <td align="center" valign="top">17</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="fourteen" type="checkbox" id="fourteen" value="37" /></td>
    <td align="left" valign="top">Death of a close friend</td>
    <td align="center" valign="top">37</td>
    <td align="center" valign="top"><input name="thirtyone" type="checkbox" id="thirtyone" value="16" /></td>
    <td align="left" valign="top">Change in sleeping habits</td>
    <td align="center" valign="top">16</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="fifteen" type="checkbox" id="fifteen" value="35" /></td>
    <td align="left" valign="top">Increase or decrease in number of arguments</td>
    <td align="center" valign="top">35</td>
    <td align="center" valign="top"><input name="thirty" type="checkbox" value="15" /></td>
    <td align="left" valign="top">Change in eating habits</td>
    <td align="center" valign="top">15</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="sixteen" type="checkbox" id="sixteen" value="31" /></td>
    <td align="left" valign="top">Taking out a big mortgage</td>
    <td align="center" valign="top">31</td>
    <td align="center" valign="top"><input name="thirtythree" type="checkbox" id="thirtythree" value="13" /></td>
    <td align="left" valign="top">Vacation</td>
    <td align="center" valign="top">13</td>
  </tr>
  <tr>
    <td width="5%" align="center" valign="top"><input name="seventeen" type="checkbox" id="seventeen" value="30" /></td>
    <td width="30%" align="left" valign="top">Change in work responsibilites <br /></td>
    <td width="15%" align="center" valign="top">30</td>
    <td width="5%" align="center" valign="top"><input name="thirtyfour" type="checkbox" value="11" /></td>
    <td width="30%" align="left" valign="top"><p>      Minor violations of the law
    </p></td>
    <td width="15%" align="center" valign="top"><p>11 </p></td>
  </tr>
  <tr>
    <td colspan="5" align="left" valign="top">TOTAL POINT VALUE: <input type="button" name="calc" value="Calculate">  
<input name="total" type="text" size="10" maxlength="10"></td>
    <td width="15%" align="center" valign="top">&nbsp;</td>
  </tr>
</table>
</form>

wirehopper · #2 (**permalink**) 03-11-10, 07:03 AM

Are you willing to pay for the help or are you looking for existing code?

job0107 · #3 (**permalink**) 03-11-10, 09:36 AM

That's a fairly simple script.
It only took me a couple minutes to write it up.

I changed a couple things in your HTML code.
I added the onclick event listener to your calculate button to call the Javascript function that adds up the values.
And I added an id property to your "total" input element.
And I also added a style property to your "total" input element to force the value to the right.

HTML Code:

<html>
<head>
<script>
function add_values()
{
 var value = 0;
 var objs = document.getElementsByTagName("input");
 for(var i=0;i<objs.length;i++)
 {
  var obj = objs[i].type;
  if(obj == "checkbox")
  {
   if(objs[i].checked == true){value += parseInt(objs[i].value);}
   }
  }
 if(value != 0){document.getElementById("total").value = value;}
 }
</script>
</head>
<body>
<form>
<table width="100%" border="0" cellspacing="1" cellpadding="1">
  <tr>
    <td width="5%" align="center" valign="top">&nbsp;</td>
    <td width="30%" align="left" valign="top">EVENTS</td>
    <td width="15%" align="center" valign="top">SCALE</td>
    <td width="5%" align="center" valign="top">&nbsp;</td>
    <td width="30%" align="left" valign="top">EVENTS</td>
    <td width="15%" align="center" valign="top">SCALE</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="one" type="checkbox" value="100" /></td>
    <td align="left" valign="top">Death of a spouse</td>
    <td align="center" valign="top">100</td>
    <td align="center" valign="top"><input name="eighteen" type="checkbox" id="eighteen" value="29" /></td>
    <td align="left" valign="top">Son or daughter leaving home</td>
    <td align="center" valign="top">29</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="two" type="checkbox" id="two" value="65" /></td>
    <td align="left" valign="top">Marital separation</td>
    <td align="center" valign="top">65</td>
    <td align="center" valign="top"><input name="nineteen" type="checkbox" id="nineteen" value="29" /></td>
    <td align="left" valign="top">Trouble with inlaws</td>
    <td align="center" valign="top">29</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="three" type="checkbox" id="three" value="53" /></td>
    <td align="left" valign="top">Death of a close relative</td>
    <td align="center" valign="top">53</td>
    <td align="center" valign="top"><input name="twenty" type="checkbox" id="twenty" value="28" /></td>
    <td align="left" valign="top">Outstanding personal achievement</td>
    <td align="center" valign="top">28</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="four" type="checkbox" id="four" value="53" /></td>
    <td align="left" valign="top">Personal injury or illness</td>
    <td align="center" valign="top">53</td>
    <td align="center" valign="top"><input name="twentyone" type="checkbox" id="twentyone" value="26" /></td>
    <td align="left" valign="top">Spouse begins or stops work</td>
    <td align="center" valign="top">26</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="five" type="checkbox" id="five" value="50" /></td>
    <td align="left" valign="top"> Marriage</td>
    <td align="center" valign="top">50</td>
    <td align="center" valign="top"><input name="twentytwo" type="checkbox" id="twentytwo" value="24" /></td>
    <td align="left" valign="top">Revision of personal habits</td>
    <td align="center" valign="top">24</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="six" type="checkbox" id="six" value="47" /></td>
    <td align="left" valign="top">Loss of a job</td>
    <td align="center" valign="top">47</td>
    <td align="center" valign="top"><input name="twentythree" type="checkbox" id="twentythree" value="23" /></td>
    <td align="left" valign="top">Foreclosure of mortgage</td>
    <td align="center" valign="top">23</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="seven" type="checkbox" id="seven" value="45" /></td>
    <td align="left" valign="top">Marital reconciliation</td>
    <td align="center" valign="top">45</td>
    <td align="center" valign="top"><input name="twentyfour" type="checkbox" id="twentyfour" value="20" /></td>
    <td align="left" valign="top">Trouble with business superior</td>
    <td align="center" valign="top">20</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="eight" type="checkbox" id="eight" value="45" /></td>
    <td align="left" valign="top">Retirement</td>
    <td align="center" valign="top">45</td>
    <td align="center" valign="top"><input name="twentyfive" type="checkbox" id="twentyfive" value="20" /></td>
    <td align="left" valign="top">Change in work hours</td>
    <td align="center" valign="top">20</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="nine" type="checkbox" id="nine" value="44" /></td>
    <td align="left" valign="top">Change in health of a relative</td>
    <td align="center" valign="top">44</td>
    <td align="center" valign="top"><input name="twentysix" type="checkbox" id="twentysix" value="20" /></td>
    <td align="left" valign="top">Change in residence</td>
    <td align="center" valign="top">20</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="ten" type="checkbox" id="ten" value="40" /></td>
    <td align="left" valign="top">Pregnancy</td>
    <td align="center" valign="top">40</td>
    <td align="center" valign="top"><input name="twentyseen" type="checkbox" id="twentyseen" value="20" /></td>
    <td align="left" valign="top">Change in school</td>
    <td align="center" valign="top">20</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="eleven" type="checkbox" id="eleven" value="39" /></td>
    <td align="left" valign="top">Sex difficulties</td>
    <td align="center" valign="top">39</td>
    <td align="center" valign="top"><input name="twentyeight" type="checkbox" id="twentyeight" value="19" /></td>
    <td align="left" valign="top">Change in recreation</td>
    <td align="center" valign="top">19</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="twelve" type="checkbox" id="twelve" value="39" /></td>
    <td align="left" valign="top">New family member</td>
    <td align="center" valign="top">39</td>
    <td align="center" valign="top"><input name="twentynine" type="checkbox" id="twentynine" value="18" /></td>
    <td align="left" valign="top">Change in social activities</td>
    <td align="center" valign="top">18</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="thirteen" type="checkbox" id="thirteen" value="38" /></td>
    <td align="left" valign="top">Change in financial status</td>
    <td align="center" valign="top">38</td>
    <td align="center" valign="top"><input name="thirty" type="checkbox" id="thirty" value="18" /></td>
    <td align="left" valign="top">Taking out a small loan</td>
    <td align="center" valign="top">17</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="fourteen" type="checkbox" id="fourteen" value="37" /></td>
    <td align="left" valign="top">Death of a close friend</td>
    <td align="center" valign="top">37</td>
    <td align="center" valign="top"><input name="thirtyone" type="checkbox" id="thirtyone" value="16" /></td>
    <td align="left" valign="top">Change in sleeping habits</td>
    <td align="center" valign="top">16</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="fifteen" type="checkbox" id="fifteen" value="35" /></td>
    <td align="left" valign="top">Increase or decrease in number of arguments</td>
    <td align="center" valign="top">35</td>
    <td align="center" valign="top"><input name="thirty" type="checkbox" value="15" /></td>
    <td align="left" valign="top">Change in eating habits</td>
    <td align="center" valign="top">15</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="sixteen" type="checkbox" id="sixteen" value="31" /></td>
    <td align="left" valign="top">Taking out a big mortgage</td>
    <td align="center" valign="top">31</td>
    <td align="center" valign="top"><input name="thirtythree" type="checkbox" id="thirtythree" value="13" /></td>
    <td align="left" valign="top">Vacation</td>
    <td align="center" valign="top">13</td>
  </tr>
  <tr>
    <td width="5%" align="center" valign="top"><input name="seventeen" type="checkbox" id="seventeen" value="30" /></td>
    <td width="30%" align="left" valign="top">Change in work responsibilites <br /></td>
    <td width="15%" align="center" valign="top">30</td>
    <td width="5%" align="center" valign="top"><input name="thirtyfour" type="checkbox" value="11" /></td>
    <td width="30%" align="left" valign="top"><p>      Minor violations of the law
    </p></td>
    <td width="15%" align="center" valign="top"><p>11 </p></td>
  </tr>
  <tr>
    <td colspan="5" align="left" valign="top">TOTAL POINT VALUE: <input type="button" name="calc" value="Calculate" onclick="add_values()">
     <input id="total" name="total" type="text" size="10" maxlength="10" style="text-align:right;"></td>
    <td width="15%" align="center" valign="top">&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

dayworker · #4 (**permalink**) 03-11-10, 10:39 AM

Nice bit of code work, Job0107. That's JavaScript at its finest.

JonChuck · #5 (**permalink**) 03-11-10, 11:33 AM

Quote:

Originally Posted by job0107

That's a fairly simple script.
It only took me a couple minutes to write it up.

Thank you so much for this. It works perfectly.

Question: Is there a way to make it work without the submit button? Eg. When a box is checked or unchecked, it adds or subtracts automatically.

I wish I had the money to pay for this. I have been out of work since last June. I am working on a non-profit website to help people become informed about disabilities. This is to be added to an existing article to help people identify stressors in their lives.

job0107 · #6 (**permalink**) 03-11-10, 09:12 PM

Thank you for the compliment dayworker, much appreciated.

Yes JonChuck, it is very simple.
Just add the onclick event listener to each checkbox input element and get rid of the calculate button.

HTML Code:

<html>
<head>
<script>
function add_values()
{
 var value = 0;
 var objs = document.getElementsByTagName("input");
 for(var i=0;i<objs.length;i++)
 {
  var obj = objs[i].type;
  if(obj == "checkbox")
  {
   if(objs[i].checked == true){value += parseInt(objs[i].value);}
   }
  }
 document.getElementById("total").value = value;
 }
</script>
</head>
<body>
<form>
<table width="100%" border="0" cellspacing="1" cellpadding="1">
  <tr>
    <td width="5%" align="center" valign="top">&nbsp;</td>
    <td width="30%" align="left" valign="top">EVENTS</td>
    <td width="15%" align="center" valign="top">SCALE</td>
    <td width="5%" align="center" valign="top">&nbsp;</td>
    <td width="30%" align="left" valign="top">EVENTS</td>
    <td width="15%" align="center" valign="top">SCALE</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="one" type="checkbox" value="100" onclick="add_values()" /></td>
    <td align="left" valign="top">Death of a spouse</td>
    <td align="center" valign="top">100</td>
    <td align="center" valign="top"><input name="eighteen" type="checkbox" id="eighteen" value="29" onclick="add_values()" /></td>
    <td align="left" valign="top">Son or daughter leaving home</td>
    <td align="center" valign="top">29</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="two" type="checkbox" id="two" value="65" onclick="add_values()" /></td>
    <td align="left" valign="top">Marital separation</td>
    <td align="center" valign="top">65</td>
    <td align="center" valign="top"><input name="nineteen" type="checkbox" id="nineteen" value="29" onclick="add_values()" /></td>
    <td align="left" valign="top">Trouble with inlaws</td>
    <td align="center" valign="top">29</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="three" type="checkbox" id="three" value="53" onclick="add_values()" /></td>
    <td align="left" valign="top">Death of a close relative</td>
    <td align="center" valign="top">53</td>
    <td align="center" valign="top"><input name="twenty" type="checkbox" id="twenty" value="28" onclick="add_values()" /></td>
    <td align="left" valign="top">Outstanding personal achievement</td>
    <td align="center" valign="top">28</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="four" type="checkbox" id="four" value="53" onclick="add_values()" /></td>
    <td align="left" valign="top">Personal injury or illness</td>
    <td align="center" valign="top">53</td>
    <td align="center" valign="top"><input name="twentyone" type="checkbox" id="twentyone" value="26" onclick="add_values()" /></td>
    <td align="left" valign="top">Spouse begins or stops work</td>
    <td align="center" valign="top">26</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="five" type="checkbox" id="five" value="50" onclick="add_values()" /></td>
    <td align="left" valign="top"> Marriage</td>
    <td align="center" valign="top">50</td>
    <td align="center" valign="top"><input name="twentytwo" type="checkbox" id="twentytwo" value="24" onclick="add_values()" /></td>
    <td align="left" valign="top">Revision of personal habits</td>
    <td align="center" valign="top">24</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="six" type="checkbox" id="six" value="47" onclick="add_values()" /></td>
    <td align="left" valign="top">Loss of a job</td>
    <td align="center" valign="top">47</td>
    <td align="center" valign="top"><input name="twentythree" type="checkbox" id="twentythree" value="23" onclick="add_values()" /></td>
    <td align="left" valign="top">Foreclosure of mortgage</td>
    <td align="center" valign="top">23</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="seven" type="checkbox" id="seven" value="45" onclick="add_values()" /></td>
    <td align="left" valign="top">Marital reconciliation</td>
    <td align="center" valign="top">45</td>
    <td align="center" valign="top"><input name="twentyfour" type="checkbox" id="twentyfour" value="20" onclick="add_values()" /></td>
    <td align="left" valign="top">Trouble with business superior</td>
    <td align="center" valign="top">20</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="eight" type="checkbox" id="eight" value="45" onclick="add_values()" /></td>
    <td align="left" valign="top">Retirement</td>
    <td align="center" valign="top">45</td>
    <td align="center" valign="top"><input name="twentyfive" type="checkbox" id="twentyfive" value="20" onclick="add_values()" /></td>
    <td align="left" valign="top">Change in work hours</td>
    <td align="center" valign="top">20</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="nine" type="checkbox" id="nine" value="44" onclick="add_values()" /></td>
    <td align="left" valign="top">Change in health of a relative</td>
    <td align="center" valign="top">44</td>
    <td align="center" valign="top"><input name="twentysix" type="checkbox" id="twentysix" value="20" onclick="add_values()" /></td>
    <td align="left" valign="top">Change in residence</td>
    <td align="center" valign="top">20</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="ten" type="checkbox" id="ten" value="40" onclick="add_values()" /></td>
    <td align="left" valign="top">Pregnancy</td>
    <td align="center" valign="top">40</td>
    <td align="center" valign="top"><input name="twentyseen" type="checkbox" id="twentyseen" value="20" onclick="add_values()" /></td>
    <td align="left" valign="top">Change in school</td>
    <td align="center" valign="top">20</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="eleven" type="checkbox" id="eleven" value="39" onclick="add_values()" /></td>
    <td align="left" valign="top">Sex difficulties</td>
    <td align="center" valign="top">39</td>
    <td align="center" valign="top"><input name="twentyeight" type="checkbox" id="twentyeight" value="19" onclick="add_values()" /></td>
    <td align="left" valign="top">Change in recreation</td>
    <td align="center" valign="top">19</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="twelve" type="checkbox" id="twelve" value="39" onclick="add_values()" /></td>
    <td align="left" valign="top">New family member</td>
    <td align="center" valign="top">39</td>
    <td align="center" valign="top"><input name="twentynine" type="checkbox" id="twentynine" value="18" onclick="add_values()" /></td>
    <td align="left" valign="top">Change in social activities</td>
    <td align="center" valign="top">18</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="thirteen" type="checkbox" id="thirteen" value="38" onclick="add_values()" /></td>
    <td align="left" valign="top">Change in financial status</td>
    <td align="center" valign="top">38</td>
    <td align="center" valign="top"><input name="thirty" type="checkbox" id="thirty" value="18" onclick="add_values()" /></td>
    <td align="left" valign="top">Taking out a small loan</td>
    <td align="center" valign="top">17</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="fourteen" type="checkbox" id="fourteen" value="37" onclick="add_values()" /></td>
    <td align="left" valign="top">Death of a close friend</td>
    <td align="center" valign="top">37</td>
    <td align="center" valign="top"><input name="thirtyone" type="checkbox" id="thirtyone" value="16" onclick="add_values()" /></td>
    <td align="left" valign="top">Change in sleeping habits</td>
    <td align="center" valign="top">16</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="fifteen" type="checkbox" id="fifteen" value="35" onclick="add_values()" /></td>
    <td align="left" valign="top">Increase or decrease in number of arguments</td>
    <td align="center" valign="top">35</td>
    <td align="center" valign="top"><input name="thirty" type="checkbox" value="15" onclick="add_values()" /></td>
    <td align="left" valign="top">Change in eating habits</td>
    <td align="center" valign="top">15</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="sixteen" type="checkbox" id="sixteen" value="31" onclick="add_values()" /></td>
    <td align="left" valign="top">Taking out a big mortgage</td>
    <td align="center" valign="top">31</td>
    <td align="center" valign="top"><input name="thirtythree" type="checkbox" id="thirtythree" value="13" onclick="add_values()" /></td>
    <td align="left" valign="top">Vacation</td>
    <td align="center" valign="top">13</td>
  </tr>
  <tr>
    <td width="5%" align="center" valign="top"><input name="seventeen" type="checkbox" id="seventeen" value="30" onclick="add_values()" /></td>
    <td width="30%" align="left" valign="top">Change in work responsibilites <br /></td>
    <td width="15%" align="center" valign="top">30</td>
    <td width="5%" align="center" valign="top"><input name="thirtyfour" type="checkbox" value="11" onclick="add_values()" /></td>
    <td width="30%" align="left" valign="top"><p>      Minor violations of the law
    </p></td>
    <td width="15%" align="center" valign="top"><p>11 </p></td>
  </tr>
  <tr>
    <td colspan="5" align="left" valign="top">TOTAL POINT VALUE: <input id="total" name="total" type="text" value="0" size="10" maxlength="10" style="text-align:right;"></td>
    <td width="15%" align="center" valign="top">&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

JonChuck · #7 (**permalink**) 03-11-10, 09:39 PM

This is awesome, thank you. <<<link removed>>>

I will be taking this code and adding it to an article I am writing for my website. It will really help people identify the severity of too many stressors in their lives.

Again, thank you very much.

-----------------------------------
The Jon and Chuck Website
Articles, Videos, Links, Discussions, etc on "Invisible Issue" Disabilities
We Do the Research For You
www . jonandchuck . com

job0107 · #8 (**permalink**) 03-12-10, 08:23 AM

Quote:

Originally Posted by JonChuck

This is awesome, thank you. <<<link removed>>>

I will be taking this code and adding it to an article I am writing for my website. It will really help people identify the severity of too many stressors in their lives.

Again, thank you very much.

-----------------------------------
The Jon and Chuck Website
Articles, Videos, Links, Discussions, etc on "Invisible Issue" Disabilities
We Do the Research For You
www . jonandchuck . com

Well, thank you very much JonChuck.

JonChuck, please don't be offended, but you did not read my code correctly.
You changed the HTML portion of your page and incorporated the onclick event listener to each input element, that was very good.
But you did not use the modified Javascript that I supplied.

HTML Code:

function add_values()
{
 var value = 0;
 var objs = document.getElementsByTagName("input");
 for(var i=0;i<objs.length;i++)
 {
  var obj = objs[i].type;
  if(obj == "checkbox")
  {
   if(objs[i].checked == true){value += parseInt(objs[i].value);}
   }
  }
 document.getElementById("total").value = value;
 }

Also I wanted to point out that there was a small flaw in my first code.

If you will notice, after you make the first calculation and then you clear all the check boxes and hit the calculate button again, the total does not clear.
It will contain the last calculation.
To correct that, I have to add one line of code that will clear the total each time you perform a new calculation.
Like this:

HTML Code:

<html>
<head>
<script>
function add_values()
{
 document.getElementById("total").value = "";
 var value = 0;
 var objs = document.getElementsByTagName("input");
 for(var i=0;i<objs.length;i++)
 {
  var obj = objs[i].type;
  if(obj == "checkbox")
  {
   if(objs[i].checked == true){value += parseInt(objs[i].value);}
   }
  }
 if(value != 0){document.getElementById("total").value = value;}
 }
</script>
</head>
<body>
<form>
<table width="100%" border="0" cellspacing="1" cellpadding="1">
  <tr>
    <td width="5%" align="center" valign="top">&nbsp;</td>
    <td width="30%" align="left" valign="top">EVENTS</td>
    <td width="15%" align="center" valign="top">SCALE</td>
    <td width="5%" align="center" valign="top">&nbsp;</td>
    <td width="30%" align="left" valign="top">EVENTS</td>
    <td width="15%" align="center" valign="top">SCALE</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="one" type="checkbox" value="100" /></td>
    <td align="left" valign="top">Death of a spouse</td>
    <td align="center" valign="top">100</td>
    <td align="center" valign="top"><input name="eighteen" type="checkbox" id="eighteen" value="29" /></td>
    <td align="left" valign="top">Son or daughter leaving home</td>
    <td align="center" valign="top">29</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="two" type="checkbox" id="two" value="65" /></td>
    <td align="left" valign="top">Marital separation</td>
    <td align="center" valign="top">65</td>
    <td align="center" valign="top"><input name="nineteen" type="checkbox" id="nineteen" value="29" /></td>
    <td align="left" valign="top">Trouble with inlaws</td>
    <td align="center" valign="top">29</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="three" type="checkbox" id="three" value="53" /></td>
    <td align="left" valign="top">Death of a close relative</td>
    <td align="center" valign="top">53</td>
    <td align="center" valign="top"><input name="twenty" type="checkbox" id="twenty" value="28" /></td>
    <td align="left" valign="top">Outstanding personal achievement</td>
    <td align="center" valign="top">28</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="four" type="checkbox" id="four" value="53" /></td>
    <td align="left" valign="top">Personal injury or illness</td>
    <td align="center" valign="top">53</td>
    <td align="center" valign="top"><input name="twentyone" type="checkbox" id="twentyone" value="26" /></td>
    <td align="left" valign="top">Spouse begins or stops work</td>
    <td align="center" valign="top">26</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="five" type="checkbox" id="five" value="50" /></td>
    <td align="left" valign="top"> Marriage</td>
    <td align="center" valign="top">50</td>
    <td align="center" valign="top"><input name="twentytwo" type="checkbox" id="twentytwo" value="24" /></td>
    <td align="left" valign="top">Revision of personal habits</td>
    <td align="center" valign="top">24</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="six" type="checkbox" id="six" value="47" /></td>
    <td align="left" valign="top">Loss of a job</td>
    <td align="center" valign="top">47</td>
    <td align="center" valign="top"><input name="twentythree" type="checkbox" id="twentythree" value="23" /></td>
    <td align="left" valign="top">Foreclosure of mortgage</td>
    <td align="center" valign="top">23</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="seven" type="checkbox" id="seven" value="45" /></td>
    <td align="left" valign="top">Marital reconciliation</td>
    <td align="center" valign="top">45</td>
    <td align="center" valign="top"><input name="twentyfour" type="checkbox" id="twentyfour" value="20" /></td>
    <td align="left" valign="top">Trouble with business superior</td>
    <td align="center" valign="top">20</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="eight" type="checkbox" id="eight" value="45" /></td>
    <td align="left" valign="top">Retirement</td>
    <td align="center" valign="top">45</td>
    <td align="center" valign="top"><input name="twentyfive" type="checkbox" id="twentyfive" value="20" /></td>
    <td align="left" valign="top">Change in work hours</td>
    <td align="center" valign="top">20</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="nine" type="checkbox" id="nine" value="44" /></td>
    <td align="left" valign="top">Change in health of a relative</td>
    <td align="center" valign="top">44</td>
    <td align="center" valign="top"><input name="twentysix" type="checkbox" id="twentysix" value="20" /></td>
    <td align="left" valign="top">Change in residence</td>
    <td align="center" valign="top">20</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="ten" type="checkbox" id="ten" value="40" /></td>
    <td align="left" valign="top">Pregnancy</td>
    <td align="center" valign="top">40</td>
    <td align="center" valign="top"><input name="twentyseen" type="checkbox" id="twentyseen" value="20" /></td>
    <td align="left" valign="top">Change in school</td>
    <td align="center" valign="top">20</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="eleven" type="checkbox" id="eleven" value="39" /></td>
    <td align="left" valign="top">Sex difficulties</td>
    <td align="center" valign="top">39</td>
    <td align="center" valign="top"><input name="twentyeight" type="checkbox" id="twentyeight" value="19" /></td>
    <td align="left" valign="top">Change in recreation</td>
    <td align="center" valign="top">19</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="twelve" type="checkbox" id="twelve" value="39" /></td>
    <td align="left" valign="top">New family member</td>
    <td align="center" valign="top">39</td>
    <td align="center" valign="top"><input name="twentynine" type="checkbox" id="twentynine" value="18" /></td>
    <td align="left" valign="top">Change in social activities</td>
    <td align="center" valign="top">18</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="thirteen" type="checkbox" id="thirteen" value="38" /></td>
    <td align="left" valign="top">Change in financial status</td>
    <td align="center" valign="top">38</td>
    <td align="center" valign="top"><input name="thirty" type="checkbox" id="thirty" value="18" /></td>
    <td align="left" valign="top">Taking out a small loan</td>
    <td align="center" valign="top">17</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="fourteen" type="checkbox" id="fourteen" value="37" /></td>
    <td align="left" valign="top">Death of a close friend</td>
    <td align="center" valign="top">37</td>
    <td align="center" valign="top"><input name="thirtyone" type="checkbox" id="thirtyone" value="16" /></td>
    <td align="left" valign="top">Change in sleeping habits</td>
    <td align="center" valign="top">16</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="fifteen" type="checkbox" id="fifteen" value="35" /></td>
    <td align="left" valign="top">Increase or decrease in number of arguments</td>
    <td align="center" valign="top">35</td>
    <td align="center" valign="top"><input name="thirty" type="checkbox" value="15" /></td>
    <td align="left" valign="top">Change in eating habits</td>
    <td align="center" valign="top">15</td>
  </tr>
  <tr>
    <td align="center" valign="top"><input name="sixteen" type="checkbox" id="sixteen" value="31" /></td>
    <td align="left" valign="top">Taking out a big mortgage</td>
    <td align="center" valign="top">31</td>
    <td align="center" valign="top"><input name="thirtythree" type="checkbox" id="thirtythree" value="13" /></td>
    <td align="left" valign="top">Vacation</td>
    <td align="center" valign="top">13</td>
  </tr>
  <tr>
    <td width="5%" align="center" valign="top"><input name="seventeen" type="checkbox" id="seventeen" value="30" /></td>
    <td width="30%" align="left" valign="top">Change in work responsibilites <br /></td>
    <td width="15%" align="center" valign="top">30</td>
    <td width="5%" align="center" valign="top"><input name="thirtyfour" type="checkbox" value="11" /></td>
    <td width="30%" align="left" valign="top"><p>      Minor violations of the law
    </p></td>
    <td width="15%" align="center" valign="top"><p>11 </p></td>
  </tr>
  <tr>
    <td colspan="5" align="left" valign="top">TOTAL POINT VALUE: <input type="button" name="calc" value="Calculate" onclick="add_values()">
     <input id="total" name="total" type="text" size="10" maxlength="10" style="text-align:right;"></td>
    <td width="15%" align="center" valign="top">&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

JonChuck · #9 (**permalink**) 03-12-10, 05:11 PM

I did notice that. I got past it by setting the default value on the "total" field to "0". Seems to work. I will implement the new java code.

Thanks

job0107 · #10 (**permalink**) 03-12-10, 07:23 PM

Quote:

Originally Posted by JonChuck

I did notice that. I got past it by setting the default value on the "total" field to "0". Seems to work. I will implement the new java code.

Thanks

No, you test it and you will see that it doesn't work right with the old Javascript code.
Because as you can see, I also set the default value of the total element to 0.