Calculate input fields ... give total

Posted on 2004-11-22
Last Modified: 2006-11-17
I have a dynamically generated form that's being called from the database using ASP.  The amount of rows is dependent upon how many entries exist in the database.  In this form people will enter a meter amount and then a total amount (It's a utility database).  What I want to happen is the total amount to be added to a running Total Amount for the page.  I know this has to be a javascript function but I don't know how to go about doing it.  I've included some of the code...

<form action="Enter.asp?Search=1" method="post" name="Step2">
<input type="hidden" value="<%= Property %>" name="Property">
<table width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
      <td width="35%" valign="top" align="left" class="newstext"><% IF icount = 0 then %><b><%= objRS("Service Address") %></b><br><%= objRS2("Account Number") %><% Else %>&nbsp;<% End IF %></td>
      <td width="15%" align="center" class="normal"><%= objRS2("Meter Number") %></td>
      <td width="10%" align="center" class="normal">Gas</td>
      <td width="20%" align="center" class="normal"><input type="text" class="normal" name="Used<%= var %>" size="4" maxlength="4"></td>
      <td width="20%" align="center" class="normal">$<input type="text" class="normal" name="Total<%= var %>" size="6" maxlength="6"></td>
icount = icount + 1
icount = 0
var = var + 1
      <td width="100%" colspan="5" class="normal" align="center"><hr></td>

'  Lots more here ... blah blah blah

      <td width="15%" colspan="4" align="center" class="newstext"><b><%= Property %> Grand Total:</b></td>
      <td width="15%" align="center" class="newstext">$<input type="text" name="GrandTotal" class="normaltxt" size="5" maxlength="5" readonly></td>

How to I get the Grand Total column to add dynamically with each Total entry?

Question by:BSitko
    LVL 31

    Expert Comment

    please post some sample generated html

    Author Comment

    Address Meter # Type Therm/Kwh Total
    22024-00013                              N/A         Electric  $ _______
                                                    503585     Gas       $ _______

    3001 ROMARIC CT
    09606-56017                             N/A          Electric    $______

    72024-08014                             N/A          Electric    $______
                                                    233236     Gas         $______


    GRAND TOTAL                                                        $_________

    Note the underlined areas are actually textboxes.
    LVL 18

    Accepted Solution

    Online example:

    For this example, you must apply the ID attribute to all your total fields, from total1, total2, so on, and the ID of grandtotal to where you want the answer to go.  Then assign the onkeyup events to each of the total fields.

    function updateTotal() {
          var el=true, total=0;
          for(var i=1; true; i++) {
                if (!el) break;
          var tot=document.getElementById("grandtotal");

    <input id="total1" onkeyup="javascript:updateTotal();"><br>
    <input id="total2" onkeyup="javascript:updateTotal();"><br>
    <input id="total3" onkeyup="javascript:updateTotal();"><br>

    <input id="grandtotal" readonly="readonly">


    Author Comment

    Some tweaks (the ID thing) and it works perfectly.  THANKS!
    LVL 31

    Expert Comment

    BSitko , I meant the actual HTML that the ASP sends down to a page , run an example and post the HTML source of the page generated

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Suggested Solutions

    Title # Comments Views Activity
    CFFILE upload help 98 84
    Form Field Validation Logic 11 33
    PHP Radio Array 4 27
    javascript question 6 21
    In Part 1 ( we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now