www.webdeveloper.com
Results 1 to 6 of 6

Thread: Summing up fields in a form for a total at the end of a form

  1. #1
    Join Date
    Oct 2008
    Posts
    3

    Summing up fields in a form for a total at the end of a form

    I have a form that contains a radio button, pull down menus and a text field where people can purchase tickets or contribute $ to an event. I would like to be able to have a total at the bottom of the form that adds up what the user choses in the form. I am new to javascript and need some help with the code to make this work. The radio button will add up at the bottom but not sure how to code the rest. Any help would be greatly appreciated! Here is the code:

    <script type="text/javascript">
    <!--
    function calculateTotal(frm){
    var total = 0;
    var elems = frm.getElementsByTagName('input');
    for(var i = 0; i < elems.length; i++){
    if((elems[i].type == "radio" || elems[i].type == "checkbox") && elems[i].checked){
    total += parseFloat(elems[i].value);
    }
    }
    total = total.toFixed(2)
    frm.total.value = "$" + total;
    }
    // -->
    </script>
    </head>
    <body>
    <td height="392" colspan="3"><form id="form1" name="form1" method="get" action="">
    <table width="800" border="0" align="left" cellpadding="7" cellspacing="0">
    <tr>
    <td colspan="7" valign="top"><div id="CollapsiblePanel1" class="CollapsiblePanel">
    <div class="CollapsiblePanelTab" tabindex="0">
    <table width="800" height="19" border="0" cellpadding="7" cellspacing="0">
    <tr>
    <td width="116" valign="top">

    <div align="center">
    <input name="tablesponsor" type="radio" id="tablesponsor" tabindex="1" value="600" onClick="calculateTotal(this.form)" />
    </div>
    <div align="right"></div></td>
    <td width="656"><span class="style5"><strong>TABLE SPONSOR - $600 per table</strong></span><br />
    Includes 10 individual tickets, reserved dinner seating, three bottles of wine and one individual listing in the events program. $350 tax deductible.</td>
    </tr>
    </table>
    </div>
    <div class="CollapsiblePanelContent">
    <table width="800" height="19" border="0" cellpadding="7" cellspacing="0">
    <tr>
    <td width="116" valign="top">&nbsp;</td>
    <td width="656"><table width="631" border="0" cellpadding="7" cellspacing="0" bgcolor="#FFFFCC" id="table">
    <tr>
    <td colspan="2"><span class="style5"><strong>ATTENDEES NAMES </strong></span><span class="style10">Please type in exactly how you would like the names to appear on name tags.</span></td>
    </tr>
    <tr>
    <td width="298"><input name="attendee1" type="text" id="attendee1" tabindex="2" size="45" /></td>
    <td width="305"><input name="attendee2" type="text" id="attendee2" tabindex="3" size="45" /></td>
    </tr>
    <tr>
    <td><input name="attendee3" type="text" id="attendee3" tabindex="4" size="45" /></td>
    <td><input name="attendee4" type="text" id="attendee4" tabindex="5" size="45" /></td>
    </tr>
    <tr>
    <td><input name="attendee5" type="text" id="attendee5" tabindex="6" size="45" /></td>
    <td><input name="attendee6" type="text" id="attendee6" tabindex="7" size="45" /></td>
    </tr>
    <tr>
    <td><input name="attendee7" type="text" id="attendee7" tabindex="8" size="45" /></td>
    <td><input name="attendee8" type="text" id="attendee8" tabindex="9" size="45" /></td>
    </tr>
    <tr>
    <td><input name="attendee9" type="text" id="attendee9" tabindex="10" size="45" /></td>
    <td><input name="attendee10" type="text" id="attendee10" tabindex="11" size="45" /></td>
    </tr>
    </table></td>
    </tr>
    </table>
    </div>
    </div></td>
    </tr>

    <tr>
    <td width="125" height="50" valign="top">
    <div align="center">
    <select name="individualtickets" id="individualtickets" value="50" tabindex="16" onChange="CalculateTotal(this.form)" >
    <option># of Tickets</option>
    <option value="1">1 Ticket</option>
    <option value="2">2 Tickets</option>
    <option value="3">3 Tickets</option>
    <option value="4">4 Tickets</option>
    <option value="5">5 Tickets</option>
    <option value="6">6 Tickets</option>
    <option value="7">7 Tickets</option>
    <option value="8">8 Tickets</option>
    </select>
    </div></td>
    <td width="604" colspan="6" valign="top"><div align="left"><span class="style5"><strong>INDIVIDUAL TICKETS - $50 each</strong></span><br />
    Open seating. $25 tax deductible.</div></td>
    </tr>

    <tr>
    <td width="125" height="32" valign="top">&nbsp;</td>
    <td colspan="6" valign="top">&nbsp;</td>
    </tr>

    <tr>
    <td width="125" height="50" valign="top"> <div align="center">
    <input name="contribution" type="text" id="contribution" tabindex="27" value="$" size="9" onChange="CalculateTotal(this.form)"/>
    </div></td>
    <td colspan="6" valign="top"><div align="left"><span class="style5"><strong>CONTRIBUTION<br />
    </strong><span class="style7">I am unable to attend, but have enclosed my contribution to the Turpin Athletic Boosters.</span></span></div></td>
    </tr>
    <tr>
    <td height="32" colspan="7" valign="top" bgcolor="#FFFFCC"><div align="center">
    <p>&nbsp;</p>
    <p><strong>TOTAL AMOUNT DUE: <input type="text" name="total" readonly onfocus="this.blur()" value="$0.00" />
    </strong></p>
    <p>&nbsp;</p>
    </div></td>
    </tr>
    </table>
    </form>
    </body>
    </html>

  2. #2
    Join Date
    Feb 2008
    Posts
    1,666
    Quote Originally Posted by gobucks View Post
    Code:
    function calculateTotal(frm){
    var total = 0;
    var elems = frm.getElementsByTagName('input');
    for(var i = 0; i < elems.length; i++){
    if((elems[i].type == "radio" || elems[i].type == "checkbox") && elems[i].checked){
    total += parseFloat(elems[i].value);
    }
    }
    total = total.toFixed(2)
    frm.total.value = "$" + total;
    }
    Change that to be more like this:
    Code:
    function calculateTotal(frm)
    {
        var total = 0;
        var elems = frm.elements;          // change
        for(var i = 0; i < elems.length; i++)
        {
            if((elems[i].type == "radio" || elems[i].type == "checkbox") && elems[i].checked)
            {
                total += parseFloat(elems[i].value);
            }
        }
        frm.total.value = "$" + total.toFixed(2);
        return true;
    }
    Of all the changes I made, the one marked "change" is most important. This allows you to walk through ALL form elements -- not just INPUT elements. This means that SELECT and TEXTAREA elements will be included. You just have to add the code to differentiate these elements via their .type attribute.

    Now, other questions?

  3. #3
    Join Date
    Oct 2008
    Posts
    3
    Thank you for your help! I have changed the code per your reply and it still seems like the total is only adding up the radio button. Any suggestions? Must have something wrong with the html code?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    <!--
    function calculateTotal(frm)
    {
    var total = 0;
    var elems = frm.elements; // change
    for(var i = 0; i < elems.length; i++)
    {
    if((elems[i].type == "radio" || elems[i].type == "checkbox") && elems[i].checked)
    {
    total += parseFloat(elems[i].value);
    }
    }
    frm.total.value = "$" + total.toFixed(2);
    return true;
    }

    //-->
    </script>




    </head>
    <body>
    <td height="392" colspan="3"><form id="form1" name="form1" method="get" action="">
    <table width="800" border="0" align="left" cellpadding="7" cellspacing="0">
    <tr>
    <td colspan="7" valign="top"><div id="CollapsiblePanel1" class="CollapsiblePanel">
    <div class="CollapsiblePanelTab" tabindex="0">
    <table width="800" height="19" border="0" cellpadding="7" cellspacing="0">
    <tr>
    <td width="116" valign="top">

    <div align="center">
    <input name="tablesponsor" type="radio" id="tablesponsor" tabindex="1" value="600" onClick="calculateTotal(this.form)" />
    </div>
    <div align="right"></div></td>
    <td width="656"><span class="style5"><strong>TABLE SPONSOR - $600 per table</strong></span><br />
    Includes 10 individual tickets, reserved dinner seating, three bottles of wine and one individual listing in the events program. $350 tax deductible.</td>
    </tr>
    </table>
    </div>
    <div class="CollapsiblePanelContent"> </div>
    </div></td>
    </tr>

    <tr>
    <td width="125" height="50" valign="top">
    <div align="center">
    <select name="individualtickets" id="individualtickets" value="50" tabindex="16" onChange="CalculateTotal(this.form)" >
    <option># of Tickets</option>
    <option value="1">1 Ticket</option>
    <option value="2">2 Tickets</option>
    <option value="3">3 Tickets</option>
    <option value="4">4 Tickets</option>
    <option value="5">5 Tickets</option>
    <option value="6">6 Tickets</option>
    <option value="7">7 Tickets</option>
    <option value="8">8 Tickets</option>
    </select>
    </div></td>
    <td width="604" colspan="6" valign="top"><div align="left"><span class="style5"><strong>INDIVIDUAL TICKETS - $50 each</strong></span><br />
    Open seating. $25 tax deductible.</div></td>
    </tr>

    <tr>
    <td width="125" height="32" valign="top">

    <div align="center">
    <select name="graduationseats" id="graduationseats" value="10" tabindex="25" onChange="CalculateTotal(this.form)" >
    <option># of Tickets</option>
    <option value="2">3 for $20</option>
    <option value="4">6 for $40</option>
    <option value="6">9 for $60</option>
    <option value="8">12 for $80</option>
    <option value="1">1 Ticket</option>
    <option value="2">2 Tickets</option>
    <option value="3">3 Tickets</option>
    <option value="4">4 Tickets</option>
    <option value="5">5 Tickets</option>
    <option value="6">6 Tickets</option>
    <option value="7">7 Tickets</option>
    <option value="8">8 Tickets</option>
    <option value="9">9 Tickets</option>
    <option value="10">10 Tickets</option>
    </select>
    </div></td>
    <td colspan="6" valign="top"><div align="left"><span class="style5"><strong>2009 VIP GRADUATION SEATS RAFFLE TICKETS - $10 each or 3 for $20</strong></span><br />
    Reserved VIP seats at Class of 2009 Graduation to be held Saturday, June 6th at Bank of Kentucky Center</div></td>
    </tr>
    <tr>
    <td width="125" height="32" valign="top">

    <div align="center">
    <select name="reverseraffle" id="reverseraffle" value="100" tabindex="26" onChange="CalculateTotal(this.form)" >
    <option># of Tickets</option>
    <option value="1">1 Ticket</option>
    <option value="2">2 Tickets</option>
    <option value="3">3 Tickets</option>
    <option value="4">4 Tickets</option>
    <option value="5">5 Tickets</option>
    <option value="6">6 Tickets</option>
    <option value="7">7 Tickets</option>
    <option value="8">8 Tickets</option>
    <option value="9">9 Tickets</option>
    <option value="10">10 Tickets</option>
    </select>
    </div></td>
    <td colspan="6" valign="top" class="style5"><div align="left"><strong>$10,000 REVERSE RAFFLE TICKET - $100 each<br />
    </strong><span class="style7">You do not need to be present to win. Only 250 tickets will be sold. For more information about the Reverse Raffle or to purchase your tickets online <a href="reverseraffle.html">click here</a>. </span></div></td>
    </tr>
    <tr>
    <td width="125" height="50" valign="top"> <div align="center">
    <input name="contribution" type="text" id="contribution" tabindex="27" value="$" size="9" onChange="CalculateTotal(this.form)"/>
    </div></td>
    <td colspan="6" valign="top"><div align="left"><span class="style5"><strong>CONTRIBUTION<br />
    </strong><span class="style7">I am unable to attend, but have enclosed my contribution to the Turpin Athletic Boosters.</span></span></div></td>
    </tr>
    <tr>
    <td height="32" colspan="7" valign="top" bgcolor="#FFFFCC"><div align="center">
    <p>&nbsp;</p>
    <p><strong>TOTAL AMOUNT DUE: <input type="text" name="total" readonly onfocus="this.blur()" value="$0.00" />
    </strong></p>
    <p>&nbsp;</p>
    </div></td>
    </tr>
    </table>
    </form>
    </body>
    </html>

  4. #4
    Join Date
    Feb 2008
    Posts
    1,666
    Quote Originally Posted by gobucks View Post
    Thank you for your help! I have changed the code per your reply and it still seems like the total is only adding up the radio button. Any suggestions? Must have something wrong with the html code?
    Well, your code is only checking for radio buttons and checkboxes -- so, that is all it's going to total. You don't have any checkboxes, so that means your code will only total radio buttons. What else did you want to total?

  5. #5
    Join Date
    Oct 2008
    Posts
    3
    I have a radio button to purchase a table, pull down menus where you can choose how many tickets you want to purchase (which should be times by the amount) and a text field where they can type in their contribution.

  6. #6
    Join Date
    Feb 2008
    Posts
    1,666
    OK, the pull-down menu is a SELECT element. To detect that in your code, along with .selected == true, you need to check for .type == 'select-single' or 'select-multiple' depending upon the type of SELECT element you've specified. For the text field, .type == 'text' is what your code needs to check for.

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