Approval boxes to discern numbers to be added or not. 1

jonnyGURU · Jan 20, 2005

I decided to post a new thread for this one....

Thanks to khat, I have a dynamic calculator that works regardless of how may table rows with however many form fields in it:

Code:

<html>
<head>
<script language=javascript>
function RunningTotal(frm) {
   ttl = 0;
   num = 1;
   moreNumbers = true;
   while (moreNumbers) {
      if (frm.elements["number" + num]) {
         ttl += parseInt(frm.elements["number" + num].value, 10);
         num++;
      }
      else {
         moreNumbers = false;
      }
   }
   frm.elements["total"].value = ttl;
}
</script>
</head>
<body>
<form name=blahForm>
</form>
<table width="300" border="1" cellspacing="2" cellpadding="2">
  <tr>
    <td>&nbsp;</td>
    <td><input name="number1" type="text" value="10" size="5" maxlength="4" onChange="RunningTotal(this.form)"></td>
    <td><input type="checkbox" name="Approve1" value="1"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="number2" type="text" value="20" size="5" maxlength="4" onChange="RunningTotal(this.form)"></td>
    <td><input type="checkbox" name="Approve2" value="1"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="number3" type="text" value="30" size="5" maxlength="4" onChange="RunningTotal(this.form)"></td>
    <td><input type="checkbox" name="Approve3" value="1"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="number4" type="text" value="40" size="5" maxlength="4" onChange="RunningTotal(this.form)"></td>
    <td><input type="checkbox" name="Approve4" value="1"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="number5" type="text" value="50" size="5" maxlength="4" onChange="RunningTotal(this.form)"></td>
    <td><input type="checkbox" name="Approve5" value="1"></td>
  </tr>
  <tr>
    <td>Approved Total </td>
    <td><input name="total" type="text" size="6" maxlength="5"></td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

The only thing I've really changed since I got this script was in the table I've added the column of checkboxes because what I want to do is NOT add a number to my total ("ttl") unless the corresponding "Approved" box is checked.

So, if Approved1 and Approved2 are checked, but not Approved3, then only Approved1 and Approved2 are added and calculated as "ttl."

My biggest hang up is that I don't know what you use to determine if a particular checkbox is checked or not.

Any help?

Dispensing quality rants and mishaps since 1999:

http://www.jonnyguru.com

kaht · Jan 20, 2005

jonnyGURU, sorry I missed the addition to your previous thread. There are a few things you need to change here. First, you're closing your form before the table, so none of the elements exist in the form. Move the </form> down below the </table> tag and you'll be set there. Next, you're going to want to call the function on the onclick handler of each checkbox, otherwise the form won't update every time a box is checked/unchecked. Thirdly, modify your function as I have done below and you should be set:
Take note that this script assumes you keep the naming/numbering scheme the same for each checkbox and text field

Code:

<html>
<head>
<script language=javascript>
function RunningTotal(frm) {
   ttl = 0;
   num = 1;
   moreNumbers = true;
   while (moreNumbers) {
      if (frm.elements["number" + num]) {
         ttl += (frm.elements["Approve" + num].checked) ? parseInt(frm.elements["number" + num].value, 10) : 0;
         num++;
      }
      else {
         moreNumbers = false;
      }
   }
   frm.elements["total"].value = ttl;
}
</script>
</head>
<body>
<form name=blahForm>
<table width="300" border="1" cellspacing="2" cellpadding="2">
  <tr>
    <td>&nbsp;</td>
    <td><input name="number1" type="text" value="10" size="5" maxlength="4" onChange="RunningTotal(this.form)"></td>
    <td><input type="checkbox" name="Approve1" value="1" onclick="RunningTotal(this.form)"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="number2" type="text" value="20" size="5" maxlength="4" onChange="RunningTotal(this.form)"></td>
    <td><input type="checkbox" name="Approve2" value="1" onclick="RunningTotal(this.form)"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="number3" type="text" value="30" size="5" maxlength="4" onChange="RunningTotal(this.form)"></td>
    <td><input type="checkbox" name="Approve3" value="1" onclick="RunningTotal(this.form)" onclick="RunningTotal(this.form)"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="number4" type="text" value="40" size="5" maxlength="4" onChange="RunningTotal(this.form)"></td>
    <td><input type="checkbox" name="Approve4" value="1" onclick="RunningTotal(this.form)"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="number5" type="text" value="50" size="5" maxlength="4" onChange="RunningTotal(this.form)"></td>
    <td><input type="checkbox" name="Approve5" value="1" onclick="RunningTotal(this.form)"></td>
  </tr>
  <tr>
    <td>Approved Total </td>
    <td><input name="total" type="text" size="6" maxlength="5"></td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

-kaht

jonnyGURU · Jan 20, 2005

Oops. The /form was a typo. Freaking Dreamweaver always wanting to close my freakin' tags.

It was that damn (frm.elements["Approve" + num].checked) that was hanging me up. Thanks. I was doing frm.value... Why wouldn't it be the same as other form elements? Crap, I'm stupid.

Thanks again!

Dispensing quality rants and mishaps since 1999:

http://www.jonnyguru.com

kaht · Jan 20, 2005

Glad to be of help.

-kaht

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Approval boxes to discern numbers to be added or not. 1

jonnyGURU

IS-IT--Management

kaht

Programmer

jonnyGURU

IS-IT--Management

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor