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"> </td>
<td align="right"><a href="javascript:addRow('t1')"><b>Add More</a></td>
</tr>
<tr>
<td align="right"> </td>
<td align="center"><input type="submit" name="button" id="button" value="Submit" /></td>
<td> </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>