Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Sum values from form fields

  1. #1
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Sum values from form fields

    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!

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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>
    Jeremy | jfein.net

  3. #3
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Last edited by Twey; 09-26-2008 at 05:03 PM. Reason: Rogue comma.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by stefig View Post
    Hey Nile,
    Can you show me where the difference is?
    I can't see any.
    I've highlighted the difference.
    Jeremy | jfein.net

  6. #6
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  7. #7
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    You're right: change parseInt(e[i].value, 10) to parseFloat(e[i].value).
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

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

    clunky (11-19-2008)

  10. #9
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

  11. #10
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

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