Calculating total in dynamic rows

JavaScript
1

Hi,
I am using the following code to take an order. i am adding the rows dynamically in the order form using java script. i want to multiply the quantity and cost to display the total. i am able to do it for the first row but not able to for the dynamically added rows. please help.

<%-- 
    Document   : addorderform
    Created on : Jul 26, 2011, 6:18:40 PM
    Author     : Veera
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script language="JavaScript" src="scripts/ts_picker.js"></script>
        <script>
                    
        
 function addRow(tableID) {
     
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var cell0 = row.insertCell(0);
		cell0.innerHTML=rowCount ;
                var cell1= row.insertCell(1);
            var element1 = document.createElement("input");
            cell1.appendChild(element1);
               element1.name="size"+rowCount;
               element1.size=10;
		  var cell2= row.insertCell(2);
            var element2 = document.createElement("input");
            cell2.appendChild(element2);
               element2.name="inches"+rowCount;
               element2.size=5;
		   var cell3= row.insertCell(3);
            var element3 = document.createElement("input");
            cell3.appendChild(element3);
               element3.name="density"+rowCount;
               element3.size=5;
               var cell4= row.insertCell(4);
            var element4 = document.createElement("select");
            cell4.appendChild(element4);
               element4.name="weight"+rowCount;
               var newoption=new Option("Select","S");
               element4.options[0]=newoption;
               newoption=new Option("Plain","P");
               element4.options[1]=newoption;
               newoption=new Option("Deluxe","D");
               element4.options[2]=newoption;
               element4.selectedIndex=0;
               var cell5= row.insertCell(5);
            var element5 = document.createElement("input");
            cell5.appendChild(element5);
               element5.name="qty"+rowCount;
               element5.size=5;
                element5.onchange="updateTotal(this);"
               
               var cell6= row.insertCell(6);
            var element6 = document.createElement("input");
            cell6.appendChild(element6);
               element6.name="cost"+rowCount;
               element6.size=10;
               element6.onchange="updateTotal(this);"

               var cell7= row.insertCell(7);
            var element7 = document.createElement("input");
            cell7.appendChild(element7);
               element7.name="total"+rowCount;
               
 }

 
 
 function updateTotal(x)
 {
 
var myRow = x.parentNode.parentNode
myRow.cells[7].innerHTML =
parseInt(
myRow.cells[5].getElementsByTagName('INPUT')[0].value)*
parseInt(
myRow.cells[6].getElementsByTagName('INPUT')[0].value);
}
    
</script>
    </head>
    <body>
        <%
        try
            {
            Class.forName("oracle.jdbc.driver.OracleDriver");
            Connection conn=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:XE","scott","tiger");
            Statement stmt=conn.createStatement();
            String query="select dealer_id,name from dealer where status='A'";
            ResultSet rs=stmt.executeQuery(query);
            %>
                <form id="addorder" name="addorder" method="post" action="addorderack.jsp">
      <table width="100%" border="0" align="center" valign="middle">
          <tr>
              <td align="center">
                  <h3>Add order</h3>
              </td>
          </tr>
          <tr>
    <td width="27%" align="right">Order Id:</td>
    <td width="23%" align="left">
      <input type="text" name="order id" id="textfield" />
    </td>
    <td width="50%" rowspan="9" align="center"><img border="0"  src="http://www.sitepoint.com/forums/images/Add order.JPG" width="70" height="70" /></td>
  </tr>
  <tr>
    <td align="right">Dealer Name:</td>
    <td align="left">
        <select name="dealer id">
            <option value="select">Select</option>
            <%while(rs.next()){%>
            <option value="<%=rs.getString(1)%>"><%=rs.getString(2)%></option>
            <%}%>
        </select>
    </td>
  </tr>
  <tr>
    <td align="right">Remarks:</td>
    <td align="left"><textarea name="remarks" rows="3" cols="35"></textarea></td>
  </tr>
  <tr>
    <td align="right">Tax Type:</td>
    <td align="left">
        <select name="taxtype">
            <option value="select">Select</option>
            <option value="VAT">VAT</option>
            <option value="CST">CST</option>
        </select>
    </td>
  </tr>
  <tr>

  <table width="100%" border="0" id="t1">
      <tr>
          <th><b>S.No</th>
          <th><b>Size</th>
          <th><b>Inches</th>
          <th><b>Density</th>
          <th><b>Weight</th>
          <th><b>Quantity</th>
          <th><b>Cost</th>
          <th><b>Total</th>
      </tr>
      <tr>
          <td>1</td>
          <td><input type="text" name="size1" size="10"></td>
          <td><input type="text" name="inches1" size="5"></td>
          <td><input type="text" name="density1" size="5"></td>
          <td><select name="weight1">
                  <option value="S">Select</option>
                  <option value="P">Plain</option>
                  <option value="D">Deluxe</option>
              </select>
          </td>
          <td><input type="text" name="qty1" size="5" onChange="updateTotal(this)"></td>
          <td><input type="text" name="cost1" size="10" onChange="updateTotal(this)"></td>
          <td><input type="text" name="total1" readonly="true"></td>
      </tr>
  </table>
      
  </tr>
  <tr>
      <td align="right">&nbsp;</td>
      <td align="right"><a href="javascript:addRow('t1')"><b>Add More</a></td>
  </tr>
  <tr>
    <td align="right">&nbsp;</td>
    <td align="center"><input type="submit" name="button" id="button" value="Submit" /></td>
    <td>&nbsp;</td>
  </tr>
      </table></form>
                <%
            rs.close();
            stmt.close();
            conn.close();
            }
            catch(ClassNotFoundException ce)
            {
            out.println("Unable to load the database driver"+ce);
            }
            catch(SQLException se)
            {
            out.println("SQL Exception"+se);
            }
     %>
    </body>
</html>
2 
        <script>


 function addRow(tableID) {

            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var cell0 = row.insertCell(0);
        cell0.innerHTML=rowCount ;
                var cell1= row.insertCell(1);
            var element1 = document.createElement("input");
            cell1.appendChild(element1);
               element1.name="size"+rowCount;
               element1.size=10;
          var cell2= row.insertCell(2);
            var element2 = document.createElement("input");
            cell2.appendChild(element2);
               element2.name="inches"+rowCount;
               element2.size=5;
           var cell3= row.insertCell(3);
            var element3 = document.createElement("input");
            cell3.appendChild(element3);
               element3.name="density"+rowCount;
               element3.size=5;
               var cell4= row.insertCell(4);
            var element4 = document.createElement("select");
            cell4.appendChild(element4);
               element4.name="weight"+rowCount;
               var newoption=new Option("Select","S");
               element4.options[0]=newoption;
               newoption=new Option("Plain","P");
               element4.options[1]=newoption;
               newoption=new Option("Deluxe","D");
               element4.options[2]=newoption;
               element4.selectedIndex=0;
               var cell5= row.insertCell(5);
            var element5 = document.createElement("input");
            cell5.appendChild(element5);
               element5.name="qty"+rowCount;
               element5.size=5;
              element5.onchange=function(){ updateTotal(this); }

               var cell6= row.insertCell(6);
            var element6 = document.createElement("input");
            cell6.appendChild(element6);
               element6.name="cost"+rowCount;
               element6.size=10;
               element6.onchange=function(){updateTotal(this); }

               var cell7= row.insertCell(7);
            var element7 = document.createElement("input");
            cell7.appendChild(element7);
               element7.name="total"+rowCount;

 }



 function updateTotal(x) {

 var myRow = x.parentNode.parentNode;
 var nu1=myRow.cells[5].getElementsByTagName('INPUT')[0].value.replace(/\\D/g,'');
 var nu2=myRow.cells[6].getElementsByTagName('INPUT')[0].value.replace(/\\D/g,'');
 if (nu1&&nu2){
  myRow.cells[7].innerHTML =nu1*nu2;
 }
}

</script>
3

thank you very much. the code is working now. i am desperately looking or this solution. you really helped me. thank you thank you thank you so much.

4

the totals are getting printed. i have added grand total, discount and net total. the values are not getting updated in those fields when i change the discount field. can you please help me with this

<%--
    Document   : addorderform
    Created on : Jul 26, 2011, 6:18:40 PM
    Author     : Veera
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script language="JavaScript" src="scripts/ts_picker.js"></script>

         <script>


 function addRow(tableID) {

            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var cell0 = row.insertCell(0);
        cell0.innerHTML=rowCount ;
                var cell1= row.insertCell(1);
            var element1 = document.createElement("input");
            cell1.appendChild(element1);
               element1.name="size";
               element1.size=10;
          var cell2= row.insertCell(2);
            var element2 = document.createElement("input");
            cell2.appendChild(element2);
               element2.name="inches";
               element2.size=5;
           var cell3= row.insertCell(3);
            var element3 = document.createElement("input");
            cell3.appendChild(element3);
               element3.name="density";
               element3.size=5;
               var cell4= row.insertCell(4);
            var element4 = document.createElement("select");
            cell4.appendChild(element4);
               element4.name="weight";
               var newoption=new Option("Select","S");
               element4.options[0]=newoption;
               newoption=new Option("Plain","P");
               element4.options[1]=newoption;
               newoption=new Option("Deluxe","D");
               element4.options[2]=newoption;
               element4.selectedIndex=0;
               var cell5= row.insertCell(5);
            var element5 = document.createElement("input");
            cell5.appendChild(element5);
               element5.name="qty";
               element5.size=5;
              element5.onchange=function(){ updateTotal(this); }

               var cell6= row.insertCell(6);
            var element6 = document.createElement("input");
            cell6.appendChild(element6);
               element6.name="cost";
               element6.size=10;
               element6.onchange=function(){updateTotal(this); }

               var cell7= row.insertCell(7);
            var element7 = document.createElement("input");
            cell7.appendChild(element7);
               element7.name="total";

 }
grandtotal=0;

 function updateTotal(x) {
 var myRow = x.parentNode.parentNode;
 var nu1=myRow.cells[5].getElementsByTagName('INPUT')[0].value.replace(/\\D/g,'');

var nu2=myRow.cells[6].getElementsByTagName('INPUT')[0].value.replace(/\\D/g,'');
 if (nu1&&nu2){
  myRow.cells[7].innerHTML = "<input type=text name=total  value="+nu1*nu2+">";

total=nu1*nu2;
grandtotal+=total;
document.getElementById('GT').value=grandtotal;

discount=document.getElementById('D').value;
discountamount=(grandtotal/100)*discount;
document.getElementById('DA').value=Math.round(discountamount);

var nettotal=grandtotal-discountamount;
document.getElementById('NT').value=Math.round(nettotal);
}
}

</script>

    </head>
    <body>
        <%
        try
            {
            Class.forName("oracle.jdbc.driver.OracleDriver");
            Connection conn=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:XE","scott","tiger");
            Statement stmt=conn.createStatement();
            Statement stmt1=conn.createStatement();
            String query1="select order_seq.nextVal from dual";
            ResultSet rs1=stmt1.executeQuery(query1);
            rs1.next();
            String query="select dealer_id,name from dealer where status='A'";
            ResultSet rs=stmt.executeQuery(query);
            %>
                <form id="addorder" name="addorder" method="post" action="addorderack.jsp">
      <table width="100%" border="0" align="center" valign="middle">
          <tr>
              <td align="center">
                  <h3>Add order</h3>
              </td>
          </tr>
    <tr>
    <td width="27%" align="right">Order Id:</td>
    <td width="23%" align="left">
        <input type="text" name="order id" value="<%=rs1.getString(1)%>" readonly="true" />
    </td>
    <td width="50%" rowspan="9" align="center"><img border="0"  src="http://www.sitepoint.com/forums/images/Add order.JPG" width="70" height="70" /></td>
  </tr>
  <tr>
    <td align="right">Dealer Name:</td>
    <td align="left">
        <select name="dealer id">
            <option value="select">Select</option>
            <%while(rs.next()){%>
            <option value="<%=rs.getString(1)%>"><%=rs.getString(2)%></option>
            <%}%>
        </select>
    </td>
  </tr>
  <tr>
    <td align="right">Remarks:</td>
    <td align="left"><textarea name="remarks" rows="3" cols="35"></textarea></td>
  </tr>

  <tr>
    <td align="right">Tax Type:</td>
    <td align="left">
        <select name="taxtype">
            <option value="select">Select</option>
            <option value="VAT">VAT</option>
            <option value="CST">CST</option>
        </select>
    </td>
  </tr>
  <tr>

  <table width="100%" border="0" id="t1">
      <tr>
          <th><b>S.No</th>
          <th><b>Size</th>
          <th><b>Inches</th>
          <th><b>Density</th>
          <th><b>Weight</th>
          <th><b>Quantity</th>
          <th><b>Cost</th>
          <th><b>Total</th>
      </tr>
      <tr>
          <td>1</td>
          <td><input type="text" name="size" size="10"></td>
          <td><input type="text" name="inches" size="5"></td>
          <td><input type="text" name="density" size="5"></td>
          <td><select name="weight">
                  <option value="S">Select</option>
                  <option value="P">Plain</option>
                  <option value="D">Deluxe</option>
              </select>
          </td>
          <td><input type="text" name="qty" size="5" onChange="updateTotal(this);"></td>
          <td><input type="text" name="cost" size="10" onChange="updateTotal(this);"></td>
          <td><input type="text" name="total" readonly="true"></td>

      </tr>

  </table>
 </tr>
  <tr>
      <td align="right">&nbsp;</td>
      <td align="right"><a href="javascript:addRow('t1')"><b>Add More</a></td>
  </tr>
 <tr>
     <td></td>
    <td align="right">Grand Total:</td>
    <td align="left"><input type="text" name="grandtotal" id="GT" value="0"></td>
  </tr>
   <tr>
       <td></td>
    <td align="right">Discount %:</td>
    <td align="left"><input type="text" id="D" name="discount" size="10" value="0" onChange="updateTotal(this);"></td>
  </tr>
  <tr>
     <td></td>
    <td align="right">Discount Amount:</td>
    <td align="left"><input type="text" name="discount amount" id="DA"></td>
  </tr>
  <tr>
     <td></td>
    <td align="right">Net Total:</td>
    <td align="left"><input type="text" name="net total" id="NT"></td>
  </tr>

  <tr>
    <td align="right">&nbsp;</td>
    <td align="center"><input type="submit" name="button" id="button" value="Submit" /></td>
    <td>&nbsp;</td>
  </tr>
      </table></form>
                <%
            rs.close();
            stmt.close();
            conn.close();
            }
            catch(ClassNotFoundException ce)
            {
            out.println("Unable to load the database driver"+ce);
            }
            catch(SQLException se)
            {
            out.println("SQL Exception"+se);
            }
     %>
    </body>
</html>