Autosum text fields possible??

[davncong]

I've created a webform for a user to order from a catalog. There are five colums (item #, quantity, description, price and total) and 10 rows (repeating first row so the user can order up to 10 items). The item # and description are obviously not factors, but I'd like to have the user enter a quantity and price, and have the script multiply them for a total, then (if possible) add the totals for a sub total, and (if my dreams come true) multiply the subtotal by 8% (sales tax) and display the sub total, tax and grand total.

I've seen this done many times with fixed prices but I can't find how to do it with user completed text fields.

I'm setting up a site for my wife's home business, (I'm 100% amature, but know just enough to really screw things up), and somehow she decided I'd be her IT department.

Any ideas??? Thanks, David

[Dormilich]

I'm setting up a site for my wife's home business, (I'm 100% amature, but know just enough to really screw things up), and somehow she decided I'd be her IT department.

You might want to read a javascript tutorial about events (e.g. the onchange event could be useful for you). Unfortunately I don't know one right now, maybe a google search can give you some.

Once you know how to start the javascript all the price calculations seems to be a matter of math.

As for the form, is there an address where I can have a look at it?

best regards

[gits]

As for the form, is there an address where I can have a look at it?

alternativly you could post the html-code here that is related to this problem. may be a simplified version would be enough so that the experts may have something to work with, and get an idea of your 'form construction' :)

kind regards

[davncong]

I might be way off track here, but heres what I was trying to do. I found a simple script (from The JavaScript Source) that is supposed to autosum text boxes.

Heres the script.

function startCalc(){
  interval = setInterval("calc()",1);
}
function calc(){
  one = document.autoSumForm.firstBox.value;
  two = document.autoSumForm.secondBox.value; 
  document.autoSumForm.thirdBox.value = (one * 1) + (two * 1);
}
function stopCalc(){
  clearInterval(interval);
}

That script is an external file named autoSum.js.

There is some style code added to the CSS and

<script type="text/javascript" src="autoSum.js"></script>

is added to the header on the HTML.

I added

<div style="width: 200px; text-align: center;">
<form name="autoSumForm">
  
<input class="right" type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"><br>
+ <input class="right" type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();"><br>
= <input class="right" type=text name="thirdBox">
</form>
</div>

to the table in the body of the HTML.


This is the table...

<form action="http://www.hostmonster.com/monstermail" enctype="multipart/form-data" method="POST" style="border:3px
	 ">
      <p>
      
      <table width="660"  border="3" cellpadding="3" id="order">
  <tr>
    <td width="75"><span class="style5">Item # </span></td>
    <td width="50"><span class="style5">Qty</span></td>
    <td width="319"><span class="style5">Description</span></td>
    <td width="81"><span class="style5">Price</span></td>
    <td width="77"><span class="style5">Total</span></td>
  </tr>
  <tr>
    <td><input name="item1" type="text" id="item1" size="12" maxlength="10" /></td>
    <td><input name="qty1" type="text" id="qty1" value="1" size="7" /></td>
    <td><input name="desc1" type="text" id="desc1" size="50" maxlength="50" /></td>
    <td><input name="price1" type="text" id="price1" size="12" maxlength="10" /></td>
    <td><input name="total1" type="text" id="total1" size="12" maxlength="10" /></td>
  </tr>
  <tr>
    <td><input name="item2" type="text" id="item2" size="12" maxlength="10" /></td>
    <td><input name="qty2" type="text" id="qty2" value="" size="7" /></td>
    <td><input name="desc2" type="text" id="desc2" size="50" maxlength="50" /></td>
    <td><input name="price2" type="text" id="price2" size="12" maxlength="10" /></td>
    <td><input name="total2" type="text" id="total2" size="12" maxlength="10" /></td>
  </tr>
  <tr>
    <td><input name="item3" type="text" id="item3" size="12" maxlength="10" /></td>
    <td><input name="qty3" type="text" id="qty3" value="" size="7" /></td>
    <td><input name="desc3" type="text" id="desc3" size="50" maxlength="50" /></td>
    <td><input name="price3" type="text" id="price3" size="12" maxlength="10" /></td>
    <td><input name="total3" type="text" id="total3" size="12" maxlength="10" /></td>
  </tr>
  <tr>
    <td><input name="item4" type="text" id="item4" size="12" maxlength="10" /></td>
    <td><input name="qty4" type="text" id="qty4" value="" size="7" /></td>
    <td><input name="desc4" type="text" id="desc4" size="50" maxlength="50" /></td>
    <td><input name="price4" type="text" id="price4" size="12" maxlength="10" /></td>
    <td><input name="total4" type="text" id="total4" size="12" maxlength="10" /></td>
  </tr>
  <tr>
    <td><input name="item5" type="text" id="item5" size="12" maxlength="10" /></td>
    <td><input name="qty5" type="text" id="qty5" value="" size="7" /></td>
    <td><input name="desc5" type="text" id="desc5" size="50" maxlength="50" /></td>
    <td><input name="price5" type="text" id="price5" size="12" maxlength="10" /></td>
    <td><input name="total5" type="text" id="total5" size="12" maxlength="10" /></td>
  </tr>
  <tr>
    <td><input name="item6" type="text" id="item6" size="12" maxlength="10" /></td>
    <td><input name="qty6" type="text" id="qty6" value="" size="7" /></td>
    <td><input name="desc6" type="text" id="desc6" size="50" maxlength="50" /></td>
    <td><input name="price6" type="text" id="price6" size="12" maxlength="10" /></td>
    <td><input name="total6" type="text" id="total6" size="12" maxlength="10" /></td>
  </tr>
  <tr>
    <td><input name="item7" type="text" id="item7" size="12" maxlength="10" /></td>
    <td><input name="qty7" type="text" id="qty7" value="" size="7" /></td>
    <td><input name="desc7" type="text" id="desc7" size="50" maxlength="50" /></td>
    <td><input name="price7" type="text" id="price7" size="12" maxlength="10" /></td>
    <td><input name="total7" type="text" id="total7" size="12" maxlength="10" /></td>
  </tr>
  <tr>
    <td><input name="item8" type="text" id="item8" size="12" maxlength="10" /></td>
    <td><input name="qty8" type="text" id="qty8" value="" size="7" /></td>
    <td><input name="desc8" type="text" id="desc8" size="50" maxlength="50" /></td>
    <td><input name="price8" type="text" id="price8" size="12" maxlength="10" /></td>
    <td><input name="total8" type="text" id="total8" size="12" maxlength="10" /></td>
  </tr>
  <tr>
    <td><input name="item9" type="text" id="item9" size="12" maxlength="10" /></td>
    <td><input name="qty9" type="text" id="qty9" value="" size="7" /></td>
    <td><input name="desc9" type="text" id="desc9" size="50" maxlength="50" /></td>
    <td><input name="price9" type="text" id="price9" size="12" maxlength="10" /></td>
    <td><input name="total9" type="text" id="total9" size="12" maxlength="10" /></td>
  </tr>
  <tr>
    <td><input name="item10" type="text" id="item10" size="12" maxlength="10" /></td>
    <td><input name="qty10" type="text" id="qty10" value="" size="7" /></td>
    <td><input name="desc10" type="text" id="desc10" size="50" maxlength="50" /></td>
    <td><input name="price10" type="text" id="price10" size="12" maxlength="10" /></td>
    <td><input name="total10" type="text" id="total10" size="12" maxlength="10" /></td>
  </tr>
  <tr>
    <td colspan="4"><div align="right">Sub-Total</div></td>
    <td><input name="subtotal" type="text" id="subtotal" size="12" maxlength="10" /></td>
  </tr>
  <tr>
    <td colspan="4"><div align="right">Sales Tax (8%)
      </div>      <div align="right"></div></td>
    <td><input name="tax" type="text" id="tax" size="12" maxlength="10" /></td>
  </tr>
  <tr>
    <td colspan="4">
      <div align="right"><strong>Grand Total</strong></div></td>
    <td><input name="grandtotal" type="text" id="grandtotal" size="12" maxlength="10" /></td>
  </tr>
</table>

The script is simple and only sums two boxes, but it was the only thing I could find to sum text boxes. I don't know if this can be modified enough to first calculate each item total (Price*Qty), then sub total, then calculate the 8% tax and finally grand total.

As a note, the field names in the above code do not match (no firstbox, secondbox, etc, listed in the table) because I copied the original code (what I started with) into this post. The fields would obviously have to match to make this work.

Thanks