SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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>
    Last edited by Mittineague; Jul 28, 2011 at 21:39. Reason: reformatting bbcode tags

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    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. #4
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by Mittineague; Jul 29, 2011 at 17:05. Reason: reformatting bbcode tags


Tags for this Thread

Bookmarks

Posting Permissions

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