Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do i create a table which will run subtotals for rows.... 1

Status
Not open for further replies.

Olorin1

Technical User
Feb 14, 2001
17
CA
Hello there,

Im creating a form table which needs to except amounts and then run the subtotals for the rows... (each row having a 'subtotal' cell at the right) And then add up the totals to a 'TOTAL' cell at the bottom of the table.

The thing is i was hoping (but it's not imperative) to have two or three fields for entry (text boxes) and then have the script perform document.write to the total cell (without a text box).

Here is the code i was trying to work with but im stuck at this point...
<code>
<script language=&quot;javascript&quot;>

function isNum(inputStr) {
for (var i = 0 ; i < inputStr.length; i++){
var oneChar = inputStr.subString( i, i + 1)
if (oneChar < &quot;0&quot; || oneChar > &quot;9&quot; ) {
alert(&quot;Please enter numbers only.&quot;)
return false
}
}
return true
}

function extendRows(add) {
for (var 1 = 0; i < Qty.length; i++) {
var rowSum = form.Qty.value * form.Price.value
form.Total.value = formatNum(rowSum, 2)
}
}
</script>
</code>
... im not sure if this is the way to go. I just want it to check that all fields are number enties and then perform the calculation. But im stumped.

Could you please show me a function that will do this and how to write it to the table. It'd be much appreciated.

Thanks for the help,

DES>:):O>
 
First a function like so...
Code:
function calculate(what)
{
   // Total ALL cells
   what.total_all.value = (answer_row1) + (answer_row2);
}

Then in the table you would have...
Code:
<TABLE>
   <TR>
      <TD>
         <INPUT TYPE=&quot;text&quot; NAME=&quot;cell1&quot; onKeyUp=&quot;this.form.answer_row1.value = (this.form.cell1.value - 0) + (this.form.cell2.value - 0);calculate(this.form)&quot;></TD>
      <TD>
         <INPUT TYPE=&quot;text&quot; NAME=&quot;cell2&quot;  onKeyUp=&quot;this.form.answer_row1.value = (this.form.cell1.value - 0) + (this.form.cell2.value - 0);calculate(this.form)&quot;></TD>
      <TD>
         <INPUT TYPE=&quot;text&quot; NAME=&quot;answer_row1&quot; READONLY></TD>

etc...

Put the same code for the second row (cells 3 & 4) in there and have them do the exact same thing.

I did this for work about a month ago. The beauty of it is that it performs the calculations &quot;on-the-fly&quot; as the user types the numbers into the cells. It makes the page behave like a real spreadsheet.

Let me know how it goes. Kevin
slanek@ssd.fsi.com
 
Hey kevin,

Thanks so much for your help. It works perfectly! |-0 One question though. Once an amount is entered the browser gives an error message (icon in the status bar) saying;

Line 7
Char 6
error: &quot;total_all&quot; is null or not object

It works fine but will this cause any problems later? Or perhaps it's irrelevant.

Thanks again

DES >:):O>
dstephens@hrpao.org
 
total_all would be a separate cell that would be the sum of the row-sums. So say you had three rows each having the sums tallied. The total_all would be a fourth row that would be the sum of the above three. Make sense?

This may help...
Code:
cell1 | cell2 | answer_row1
cell3 | cell4 | answer_row2
cell5 | cell6 | answer_row3
blank | blank | total of above three rows
Better? Kevin
slanek@ssd.fsi.com
 
Yeah that makes sense to me. But although each row is doing the calculation the total_all is left empty. Am i missing something for that cell? Plus that message is still occuring when data is entered. Perhaps you need to see it...

This is what i have:

<code>
<head><style language=&quot;javascript&quot;>
function calculate(what){
// Total ALL cells
what.total_all.value = (answer_row1) + (answer_row2) + (answer_row3);
}
</script>
</head>

<form>
<TABLE WIDTH=&quot;600&quot; BORDER=&quot;1&quot; ALIGN CELLPADDING CELLSPACING CLASS=&quot;SMALL&quot;>
<TR>
<TD WIDTH=&quot;100&quot; ALIGN=&quot;center&quot; VALIGN BGCOLOR=&quot;#F1F1F1&quot;><b>Unit</b></td>
<TD WIDTH=&quot;200&quot; ALIGN=&quot;center&quot; VALIGN BGCOLOR=&quot;#F1F1F1&quot;><b>Description</b></td>
<TD WIDTH=&quot;200&quot; ALIGN=&quot;center&quot; VALIGN BGCOLOR=&quot;#F1F1F1&quot;><b>Unit Price</b></td>
<TD WIDTH=&quot;100&quot; ALIGN=&quot;center&quot; VALIGN BGCOLOR=&quot;#F1F1F1&quot;><b>Total</b></td>
</TR>
<TR>
<TD WIDTH=&quot;100&quot; ALIGN=&quot;center&quot; VALIGN><INPUT TYPE=&quot;text&quot; NAME=&quot;cell1&quot; onKeyUp=&quot;this.form.answer_row1.value = (this.form.cell1.value - 0) * (this.form.cell2.value - 0);calculate(this.form)&quot; size=&quot;10&quot;></TD>
<TD WIDTH=&quot;200&quot; ALIGN=&quot;center&quot; VALIGN><input type=&quot;text&quot; name=&quot;&quot; size=&quot;25&quot; value></td>
<TD WIDTH=&quot;200&quot; ALIGN=&quot;center&quot; VALIGN><INPUT TYPE=&quot;text&quot; NAME=&quot;cell2&quot; onKeyUp=&quot;this.form.answer_row1.value = (this.form.cell1.value - 0) * (this.form.cell2.value - 0);calculate(this.form)&quot; size=&quot;10&quot;></TD>
<TD WIDTH=&quot;100&quot; ALIGN=&quot;center&quot; VALIGN><input type=&quot;text&quot; name=&quot;answer_row1&quot; size=&quot;10&quot; READONLY> </td>
</TR>
<TR>
<TD WIDTH=&quot;100&quot; ALIGN=&quot;center&quot; VALIGN><INPUT TYPE=&quot;text&quot; NAME=&quot;cell3&quot; onKeyUp=&quot;this.form.answer_row2.value = (this.form.cell3.value - 0) * (this.form.cell4.value - 0);calculate(this.form)&quot; size=&quot;10&quot;></TD>
<TD WIDTH=&quot;200&quot; ALIGN=&quot;center&quot; VALIGN><input type=&quot;text&quot; name=&quot;&quot; size=&quot;25&quot; value></td>
<TD WIDTH=&quot;200&quot; ALIGN=&quot;center&quot; VALIGN><INPUT TYPE=&quot;text&quot; NAME=&quot;cell4&quot; onKeyUp=&quot;this.form.answer_row2.value = (this.form.cell3.value - 0) * (this.form.cell4.value - 0);calculate(this.form)&quot; size=&quot;10&quot;></TD>
<TD WIDTH=&quot;100&quot; ALIGN=&quot;center&quot; VALIGN><input type=&quot;text&quot; name=&quot;answer_row2&quot; size=&quot;10&quot; READONLY> </td>
</TR>
<TR>
<TD WIDTH=&quot;100&quot; ALIGN=&quot;center&quot; VALIGN><INPUT TYPE=&quot;text&quot; NAME=&quot;cell5&quot; onKeyUp=&quot;this.form.answer_row3.value = (this.form.cell5.value - 0) * (this.form.cell6.value - 0);calculate(this.form)&quot; size=&quot;10&quot;></TD>
<TD WIDTH=&quot;200&quot; ALIGN=&quot;center&quot; VALIGN><input type=&quot;text&quot; name=&quot;&quot; size=&quot;25&quot; value></td>
<TD WIDTH=&quot;200&quot; ALIGN=&quot;center&quot; VALIGN><INPUT TYPE=&quot;text&quot; NAME=&quot;cell6&quot; onKeyUp=&quot;this.form.answer_row3.value = (this.form.cell5.value - 0) * (this.form.cell6.value - 0);calculate(this.form)&quot; size=&quot;10&quot;></TD>
<TD WIDTH=&quot;100&quot; ALIGN=&quot;center&quot; VALIGN><input type=&quot;text&quot; name=&quot;answer_row3&quot; size=&quot;10&quot; READONLY> <hr> </td>
</TR>
<TR>
<TD COLSPAN=&quot;3&quot;></TD>
<TD width ALIGN=&quot;center&quot;><INPUT TYPE=&quot;TEXT&quot; name=&quot;total_all&quot; size=&quot;10&quot; READONLY></td>
</TR>
</table>
</form>
</body>

Sorry for the mess and thanks again...

DES
 
Got you hooked up. I apologize, I misled you as you can see by the small change I made to the function. Also, you had <style language=&quot;Javascript&quot;> instead of <script langguage=&quot;Javascript&quot;> so it wouldn't have worked anyway. Works good now though.

Code:
<HTML>
<head>
<script language=&quot;javascript&quot;>
function calculate(what)
{
  // Total ALL cells
  what.total_all.value = (what.answer_row1.value - 0) + (what.answer_row2.value - 0) + (what.answer_row3.value - 0); 
}
</script>
</head>
<body>
<form>
<TABLE WIDTH=&quot;600&quot; BORDER=&quot;1&quot; ALIGN CELLPADDING CELLSPACING CLASS=&quot;SMALL&quot;>
  <TR> 
    <TD WIDTH=&quot;100&quot; ALIGN=&quot;center&quot; VALIGN BGCOLOR=&quot;#F1F1F1&quot;><b>Unit</b></td>
    <TD WIDTH=&quot;200&quot; ALIGN=&quot;center&quot; VALIGN BGCOLOR=&quot;#F1F1F1&quot;><b>Description</b></td>
    <TD WIDTH=&quot;200&quot; ALIGN=&quot;center&quot; VALIGN BGCOLOR=&quot;#F1F1F1&quot;><b>Unit Price</b></td>
    <TD WIDTH=&quot;100&quot; ALIGN=&quot;center&quot; VALIGN BGCOLOR=&quot;#F1F1F1&quot;><b>Total</b></td>
  </TR>
  <TR> 
    <TD WIDTH=&quot;100&quot; ALIGN=&quot;center&quot; VALIGN><INPUT TYPE=&quot;text&quot; NAME=&quot;cell1&quot; onKeyUp=&quot;this.form.answer_row1.value = (this.form.cell1.value - 0) * (this.form.cell2.value - 0);calculate(this.form)&quot; size=&quot;10&quot;></TD>
    <TD WIDTH=&quot;200&quot; ALIGN=&quot;center&quot; VALIGN><input type=&quot;text&quot; name=&quot;&quot; size=&quot;25&quot; value></td>
    <TD WIDTH=&quot;200&quot; ALIGN=&quot;center&quot; VALIGN><INPUT TYPE=&quot;text&quot; NAME=&quot;cell2&quot;  onKeyUp=&quot;this.form.answer_row1.value = (this.form.cell1.value - 0) * (this.form.cell2.value - 0);calculate(this.form)&quot; size=&quot;10&quot;></TD>
    <TD WIDTH=&quot;100&quot; ALIGN=&quot;center&quot; VALIGN><input type=&quot;text&quot; name=&quot;answer_row1&quot; size=&quot;10&quot; READONLY> </td>
  </TR>
  <TR> 
    <TD WIDTH=&quot;100&quot; ALIGN=&quot;center&quot; VALIGN><INPUT TYPE=&quot;text&quot; NAME=&quot;cell3&quot; onKeyUp=&quot;this.form.answer_row2.value = (this.form.cell3.value - 0) * (this.form.cell4.value - 0);calculate(this.form)&quot; size=&quot;10&quot;></TD>
    <TD WIDTH=&quot;200&quot; ALIGN=&quot;center&quot; VALIGN><input type=&quot;text&quot; name=&quot;&quot; size=&quot;25&quot; value></td>
    <TD WIDTH=&quot;200&quot; ALIGN=&quot;center&quot; VALIGN><INPUT TYPE=&quot;text&quot; NAME=&quot;cell4&quot; onKeyUp=&quot;this.form.answer_row2.value = (this.form.cell3.value - 0) * (this.form.cell4.value - 0);calculate(this.form)&quot; size=&quot;10&quot;></TD>
    <TD WIDTH=&quot;100&quot; ALIGN=&quot;center&quot; VALIGN><input type=&quot;text&quot; name=&quot;answer_row2&quot; size=&quot;10&quot; READONLY> </td>
  </TR>
  <TR> 
    <TD WIDTH=&quot;100&quot; ALIGN=&quot;center&quot; VALIGN><INPUT TYPE=&quot;text&quot; NAME=&quot;cell5&quot; onKeyUp=&quot;this.form.answer_row3.value = (this.form.cell5.value - 0) * (this.form.cell6.value - 0);calculate(this.form)&quot; size=&quot;10&quot;></TD>
    <TD WIDTH=&quot;200&quot; ALIGN=&quot;center&quot; VALIGN><input type=&quot;text&quot; name=&quot;&quot; size=&quot;25&quot; value></td>
    <TD WIDTH=&quot;200&quot; ALIGN=&quot;center&quot; VALIGN><INPUT TYPE=&quot;text&quot; NAME=&quot;cell6&quot; onKeyUp=&quot;this.form.answer_row3.value = (this.form.cell5.value - 0) * (this.form.cell6.value - 0);calculate(this.form)&quot; size=&quot;10&quot;></TD>
    <TD WIDTH=&quot;100&quot; ALIGN=&quot;center&quot; VALIGN><input type=&quot;text&quot; name=&quot;answer_row3&quot; size=&quot;10&quot; READONLY> <hr> </td>
  </TR>
  <TR>
    <TD COLSPAN=&quot;3&quot;></TD>
    <TD width ALIGN=&quot;center&quot;><INPUT TYPE=&quot;text&quot; name=&quot;total_all&quot; size=&quot;10&quot; READONLY></td>
  </TR>
</table>  
    <INPUT TYPE=&quot;reset&quot; VALUE=&quot;Reset&quot;>
</form>
</body>
</html>
Kevin
slanek@ssd.fsi.com
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top