Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding rows on a form to output a total and grand total

    Hi,

    I copied a "simple add" script that was posted years ago by wyattweb but want to modify it so that it can support multiple rows and also give me a grand total. I don’t know javascript and don’t really know where to start. Attached is the code that I have but it breaks when I add the 2nd row.

    Thanks for any help.

    <html>
    <head>
    <title>Simple add</title>

    <script language="javascript">
    function totFields()
    {
    var totArr = totForm.getElementsByTagName("input");
    var ii = totArr.length;
    var i = 0;
    var totVal = 0;

    for (i=0;i<ii;i++)
    {
    if (totArr(i).type == "text" &&
    totArr(i).value > "" &&
    totArr(i).id != "txtTotal")
    {
    totVal += parseInt(totArr(i).value);
    }
    }
    totForm.txtTotal.value = totVal;
    }

    </script>
    </head>

    <body>

    <form method="POST" action="" id="totForm">
    <table colspan="1">
    <tr bgcolor="#F3F3F3">
    <td class="center">Small</td>
    <td class="center">Medium</td>
    <td class="center">Large</td>
    <td class="center">X-Large</td>
    <td class="center">Total</td>
    </tr>
    <tr bgcolor="#F3F3F3">
    <td class="center"><input type="text" size="3" name="T1" onchange="totFields();"></td>
    <td class="center"><input type="text" size="3" name="T2" onchange="totFields();"></td>
    <td class="center"><input type="text" size="3" name="T3" onchange="totFields();"></td>
    <td class="center"><input type="text" size="3" name="T4" onchange="totFields();"></td>
    <td class="center"><input type="text" size="3" name="txtTotal" size="20" ID="txtTotal"></td>
    </tr>
    <tr bgcolor="#F3F3F3">
    <td class="center"><input type="text" size="3" name="T1" onchange="totFields();"></td>
    <td class="center"><input type="text" size="3" name="T2" onchange="totFields();"></td>
    <td class="center"><input type="text" size="3" name="T3" onchange="totFields();"></td>
    <td class="center"><input type="text" size="3" name="T4" onchange="totFields();"></td>
    <td class="center"><input type="text" size="3" name="txtTotal" size="20" ID="txtTotal"></td>
    </tr>
    <tr bgcolor="#F3F3F3">
    <td colspan="4">Grand Total:</td>
    <td class="center"><input type="text" size="3" name="txtTotal" size="20" ID="txtTotal"></td>
    </tr>

    </table>
    </form>

    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Give this a try.

    PHP Code:
    <html
    <
    head
    <
    title>Simple add</title

    <
    script type="text/javascript">

    function 
    totFields(){

    puts=document.getElementById("r1").getElementsByTagName("input").length

    rowCount
    =0

    while(document.getElementById("r"+rowCount)){
    subTotal=0
    currentRow
    =document.getElementById("r"+rowCount)
    rowInputs=currentRow.getElementsByTagName("input")

    for(var 
    i=0;i<rowInputs.length;i++){

    if(
    rowInputs[i].type=="text"&&rowInputs[i].name.indexOf("subtotal")==-1){
    subTotal+=rowInputs[i].value*1
    }

    }

    document.getElementById("subtotal"+rowCount).value=subTotal
    rowCount
    ++
    }

    total=0
    for(var j=0;j<rowCount;j++){
    total+=document.getElementById("subtotal"+j).value*1
    }

    document.getElementById("gtotal").value=total

    }

    </script>
    </head>

    <body>

    <form method="POST" action="" id="totForm">
    <table colspan="1">
    <tr bgcolor="#F3F3F3">
    <td class="center">Small</td>
    <td class="center">Medium</td>
    <td class="center">Large</td>
    <td class="center">X-Large</td>
    <td class="center">Total</td>
    </tr>
    <tr bgcolor="#F3F3F3" id="r0">
    <td class="center"><input type="text" size="3" name="t1" onchange="totFields();"></td>
    <td class="center"><input type="text" size="3" name="t2" onchange="totFields();"></td>
    <td class="center"><input type="text" size="3" name="t3" onchange="totFields();"></td>
    <td class="center"><input type="text" size="3" name="t4" onchange="totFields();"></td>
    <td class="center"><input type="text" size="3" name="subtotal0" size="20" id="subtotal0" readonly></td>
    </tr>
    <tr bgcolor="#F3F3F3" id="r1">
    <td class="center"><input type="text" size="3" name="t1" onchange="totFields();"></td>
    <td class="center"><input type="text" size="3" name="t2" onchange="totFields();"></td>
    <td class="center"><input type="text" size="3" name="t3" onchange="totFields();"></td>
    <td class="center"><input type="text" size="3" name="t4" onchange="totFields();"></td>
    <td class="center"><input type="text" size="3" name="subtotal1" size="20" id="subtotal1" readonly></td>
    </tr>
    <tr bgcolor="#F3F3F3">
    <td colspan="4">Grand Total:</td>
    <td class="center"><input type="text" size="3" name="gtotal" size="20" id="gtotal" readonly></td>
    </tr>

    </table>
    </form>

    </body>
    </html> 
    Note:
    Be careful when using capitals as Javascript is case sensitive
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Awesome! Works great!!

    Thanks Mr. J!! This is exactly what I needed it to do. It will probably take me a week to figure out how you did it. Until then, it's all magic to me.

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Robert

    Glad to be of help, here's a brief explanation of what happens.

    If you look at the HTML code you will notice that I gave each row containing the inputs an ID, this effectively puts them in groups.

    The script then loops through each group adding them together.

    The one thing I forgot to include was to check that a value being added was a number.

    This can be done by adding &&!isNaN(rowInputs[i].value)

    to this line

    if(rowInputs[i].type=="text"&&rowInputs[i].name.indexOf("subtotal")==-1){

    like this

    if(rowInputs[i].type=="text"&&rowInputs[i].name.indexOf("subtotal")==-1&&!isNaN(rowInputs[i].value)){
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #5
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for this code, its almost exactly what I need, with the exception that I need to Multiply the row quantities to get the row subtotal, then add the subtotals. How do I change it so the row quantities are multiplied to get the subtotal?


  •  

    Posting Permissions

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