Sum values from form fields

**stefig** · 09-12-2008, 07:09 PM

Hello,
I am working on a script, but I'm really not an expert. Any help will be highly appreciated.
Description:
I have items - some have option for adding an amount and some not (because they can be only 1).
I need when the checkboxes are clicked (choosing an item) the total to be displayed in the text field at the bottom.
the single items work fine, but when i choose the one that can be added amount, it deletes the total from the first ones.
Below is the script so you can see what I'm trying to explain:

Code:

<html><head>
<script type="text/JavaScript"><!-- 

        var Cost;
        var Amount = 0;

function getNumber() {	
		Amount = document.orderform.EVT_01.value;
		}
function tally()        {
        Cost = 0;
        if (document.orderform.Item1.checked) { Cost = Cost + 40; }
        if (document.orderform.Item2.checked) { Cost = Cost + 30; }
        if (document.orderform.Item3.checked) { Cost = 100 * Amount; }
		
Cost = dollar(Cost);
document.orderform.Total.value = "$" + Cost;
        }

function dollar (amount)
{
        amount = parseInt(amount * 100);
        amount = parseFloat(amount/100);
        if (((amount) == Math.floor(amount)) && ((amount - Math.floor (amount)) == 0))
        {
                amount = amount + ".00"
                return amount;
        }
        if ( ((amount * 10) - Math.floor(amount * 10)) == 0)
        {
                amount = amount + "0";
                return amount;
        }
        if ( ((amount * 100) - Math.floor(amount * 100)) == 0)
        {
                amount = amount;
                return amount;
        }
        return amount;
}

//--></script>
</head>
<body><form name="orderform">
<table width="500" border="0" cellspacing="1" cellpadding="1">
<tr><td width="167"><input type="checkbox" name="Item1" value="Item1_chosen" onClick="tally()" />AAA</td>
<td width="51">$40</td>
<td width="109">&nbsp;</td></tr>
<tr><td><input type="checkbox" name="Item2" value="Item2_chosen" onClick="tally()" />BBB</td>
<td>$30</td>
<td>&nbsp;</td></tr>
<tr><td colspan="3">&nbsp;</td></tr>
<tr><td><input type="checkbox" name="Item3" value="Item3_chosen" onClick="tally()" /><span class="EventPrice"><a href="#" title=" CCC " 

target="_blank">CCC</a></span></td>
<td><span class="EventPrice">$100</span></td>
	
<td>Amount:<input name="EVT_01" type="text" id="EVT_01" value="0" size="3" maxlength="3" onChange="getNumber()" /></td></tr>
<tr>
<td colspan="3">&nbsp;</td></tr>
<tr><td>Total:<input name="Total" type="text" value="$0" size="7" readonly="readonly"></td>
<td colspan="2">&nbsp;</td></tr>
</table></form></body></html>

Thanks in advance for your help!

**Nile** · 09-12-2008, 11:41 PM

Here:

Code:

<html><head>
<script type="text/JavaScript"><!-- 

        var Cost;
        var Amount = 0;

function getNumber() {	
		Amount = document.orderform.EVT_01.value;
		}
function tally()        {
        Cost = 0;
        if (document.orderform.Item1.checked) { Cost = Cost + 40; }
        if (document.orderform.Item2.checked) { Cost = Cost + 30; }
        if (document.orderform.Item3.checked) { Cost = 100 * Amount; }
		
Cost = dollar(Cost);
document.orderform.Total.value = "$" + Cost;
        }

function dollar (amount)
{
        amount = parseInt(amount * 100);
        amount = parseFloat(amount/100);
        if (((amount) == Math.floor(amount)) && ((amount - Math.floor (amount)) == 0))
        {
                amount += ".00"
                return amount;
        }
        if ( ((amount * 10) - Math.floor(amount * 10)) == 0)
        {
                amount +=  amount + "0";
                return amount;
        }
        if ( ((amount * 100) - Math.floor(amount * 100)) == 0)
        {
                amount +=  amount + amount;
                return amount;
        }
        return amount;
}

//--></script>
</head>
<body><form name="orderform">
<table width="500" border="0" cellspacing="1" cellpadding="1">
<tr><td width="167"><input type="checkbox" name="Item1" value="Item1_chosen" onClick="tally()" />AAA</td>
<td width="51">$40</td>
<td width="109">&nbsp;</td></tr>
<tr><td><input type="checkbox" name="Item2" value="Item2_chosen" onClick="tally()" />BBB</td>
<td>$30</td>
<td>&nbsp;</td></tr>
<tr><td colspan="3">&nbsp;</td></tr>
<tr><td><input type="checkbox" name="Item3" value="Item3_chosen" onClick="tally()" /><span class="EventPrice"><a href="#" title=" CCC " 

target="_blank">CCC</a></span></td>
<td><span class="EventPrice">$100</span></td>
	
<td>Amount:<input name="EVT_01" type="text" id="EVT_01" value="0" size="3" maxlength="3" onChange="getNumber()" /></td></tr>
<tr>
<td colspan="3">&nbsp;</td></tr>
<tr><td>Total:<input name="Total" type="text" value="$0" size="7" readonly="readonly"></td>
<td colspan="2">&nbsp;</td></tr>
</table></form></body></html>

**stefig** · 09-13-2008, 02:09 AM

Hey Nile,
Can you show me where the difference is?
I can't see any.

**Twey** · 09-13-2008, 11:27 AM

Better (by far):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>cmene be fa no da pagbu</title>
    <script type="text/javascript">
      var Format = {
        currency: function(n, dp, s) {
          return (s || '$') + n.toFixed(dp || 2);
        },

        interpolate: function(s) {
          for (var i = 1; i < arguments.length; ++i)
            s = s.replace("%s", arguments[i]);

          return s;
        }
      };

      var Functional = {
        map: function(f, a) {
          for (var i = a.length - 1, r = []; i >= 0; --i)
            r[i] = f(a[i], i);

          return r;
        }
      };

      var Dom = {
        getElementsByClassName: (function() {
          function getElementsByClassName_(root, className) {
            return (className(root.className || "") ? [root] : []).concat(entr(root, className));
          }

          function entr(root, className) {
            if (typeof className === "string")
              className = (function(cn) {
                return function(c) {
                  return c.indexOf(cn) >= 0;
                };
              })(className);

            return Array.prototype.concat.apply([], Functional.map(function(e) {
              return getElementsByClassName_(e, className);
            }, root.childNodes));
          }

          return entr;
        })()
      };

      var TallyPage = {
        sumForm: function(frm, qstr) {
          for (var t = 0, v, e = Dom.getElementsByClassName(frm, "sum"), i = e.length; --i >= 0; )
            if (e[i].type === "checkbox" && e[i].checked)
              t += ((v = frm.elements[Format.interpolate(qstr, e[i].name)]) ? v.value : 1) * parseInt(e[i].value, 10);

          return t;
        },

        updateForm: function(frm, out) {
          (out.firstChild || out.appendChild(document.createTextNode(""))).nodeValue = Format.currency(TallyPage.sumForm(frm, "%s_q"));
        },

        init: function() {
          var ud = function() { TallyPage.updateForm(this.form, document.getElementById("output")); },
              v;

          Functional.map(function(e) { e.onclick = e.onkeyup = e.onchange = ud; },
              Dom.getElementsByClassName(v = document.forms['sum_form'], function(c) {
                return c.indexOf('sum') >= 0 || c.indexOf('quantity') >= 0;
              }));

          TallyPage.updateForm(v, document.getElementById("output"));

          (v = v.elements.subm).parentNode.removeChild(v);
          v = null;
        }
      };

      onload = TallyPage.init;
    </script>
  </head>
  <body>
    <form action="/some/summer" id="sum_form">
      <table>
        <thead>
          <tr>
            <th>&nbsp;</th>
            <th>Event</th>
            <th>Price</th>
            <th>Quantity</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input type="checkbox" value="40" class="sum" name="aaa">
            </td>
            <td>AAA</td>
            <td>$40.00</td>
            <td>1</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" value="30" class="sum" name="bbb">
            </td>
            <td>BBB</td>
            <td>$30.00</td>
            <td>1</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" value="100" class="sum" name="ccc">
            </td>
            <td>
              <a href="#" title="CCC">CCC</a>
            </td>
            <td>$100.00</td>
            <td>
              <input type="textbox" class="quantity" name="ccc_q">
            </td>
          </tr>
        </tbody>
      </table>
      <span id="output">&nbsp;</span>
      <input name="subm" type="submit" value="Show Total">
    </form>
  </body>
</html>

I suggest you have a read of http://dynamicdrive.com/forums/showp...postcount=1337.

**Nile** · 09-14-2008, 02:16 AM

Originally Posted by stefig

Hey Nile,
Can you show me where the difference is?
I can't see any.

I've highlighted the difference.

**stefig** · 09-26-2008, 01:33 PM

Thanks, Tway.
Your code is awesome.
It's a very different approach, but i like it a lot.
Thank you!

**clunky** · 11-19-2008, 08:30 AM

Hi Twey
Thats a nice solution, apart from one thing....
If the value of the price value is a decimal (which is what I need) it doesn't calculate correctly. It seems not to take account of the decimal point?

Code:

<input type="checkbox" value="100.50" class="sum" name="ccc">

I have tried to alter the Format: currency but to no avail.
I was wondering if there has been any further developments with this particular app or you could point me in the right direction.
Anyone?

Cheers

**Twey** · 11-19-2008, 09:24 AM

You're right: change parseInt(e[i].value, 10) to parseFloat(e[i].value).

**clunky** · 11-19-2008, 09:50 AM

:-) Very nice, thank you loads !!
Strange how just a simple thing like that will mess it all up .
Cheers

**clunky** · 11-19-2008, 09:54 AM

Twey
If I wanted to see if the tally sum was less than another total, could I grab the output and do some maths with that?
like...

Code:

if (Dom.getElementsByClassName(output){
do this...}

If a customer needs to see if their total amount is less than a discountable amount then show them how much they need to add in order to get to the right total.
Cheers

Thread: Sum values from form fields

Thread Tools

Search Thread

Sum values from form fields

The Following User Says Thank You to Twey For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions