SitePoint Sponsor

# Thread: Calculating total in dynamic rows

1. ## Calculating total in dynamic rows

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.

Code Java:
```<%--
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. Code:
```        <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

Code Java:
```<%--
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>```

#### Posting Permissions

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