469,344 Members | 6,393 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,344 developers. It's quick & easy.

Autosum text fields possible??

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
Aug 26 '08 #1
3 2551
Dormilich
8,652 Expert Mod 8TB
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
Aug 26 '08 #2
gits
5,390 Expert Mod 4TB
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
Aug 26 '08 #3
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.
Expand|Select|Wrap|Line Numbers
  1. function startCalc(){
  2.   interval = setInterval("calc()",1);
  3. }
  4. function calc(){
  5.   one = document.autoSumForm.firstBox.value;
  6.   two = document.autoSumForm.secondBox.value; 
  7.   document.autoSumForm.thirdBox.value = (one * 1) + (two * 1);
  8. }
  9. function stopCalc(){
  10.   clearInterval(interval);
  11. }

That script is an external file named autoSum.js.

There is some style code added to the CSS and
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="autoSum.js"></script> 
is added to the header on the HTML.

I added
Expand|Select|Wrap|Line Numbers
  1. <div style="width: 200px; text-align: center;">
  2. <form name="autoSumForm">
  3.  
  4. <input class="right" type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"><br>
  5. + <input class="right" type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();"><br>
  6. = <input class="right" type=text name="thirdBox">
  7. </form>
  8. </div>
to the table in the body of the HTML.


This is the table...

Expand|Select|Wrap|Line Numbers
  1. <form action="http://www.hostmonster.com/monstermail" enctype="multipart/form-data" method="POST" style="border:3px
  2.      ">
  3.       <p>
  4.  
  5.       <table width="660"  border="3" cellpadding="3" id="order">
  6.   <tr>
  7.     <td width="75"><span class="style5">Item # </span></td>
  8.     <td width="50"><span class="style5">Qty</span></td>
  9.     <td width="319"><span class="style5">Description</span></td>
  10.     <td width="81"><span class="style5">Price</span></td>
  11.     <td width="77"><span class="style5">Total</span></td>
  12.   </tr>
  13.   <tr>
  14.     <td><input name="item1" type="text" id="item1" size="12" maxlength="10" /></td>
  15.     <td><input name="qty1" type="text" id="qty1" value="1" size="7" /></td>
  16.     <td><input name="desc1" type="text" id="desc1" size="50" maxlength="50" /></td>
  17.     <td><input name="price1" type="text" id="price1" size="12" maxlength="10" /></td>
  18.     <td><input name="total1" type="text" id="total1" size="12" maxlength="10" /></td>
  19.   </tr>
  20.   <tr>
  21.     <td><input name="item2" type="text" id="item2" size="12" maxlength="10" /></td>
  22.     <td><input name="qty2" type="text" id="qty2" value="" size="7" /></td>
  23.     <td><input name="desc2" type="text" id="desc2" size="50" maxlength="50" /></td>
  24.     <td><input name="price2" type="text" id="price2" size="12" maxlength="10" /></td>
  25.     <td><input name="total2" type="text" id="total2" size="12" maxlength="10" /></td>
  26.   </tr>
  27.   <tr>
  28.     <td><input name="item3" type="text" id="item3" size="12" maxlength="10" /></td>
  29.     <td><input name="qty3" type="text" id="qty3" value="" size="7" /></td>
  30.     <td><input name="desc3" type="text" id="desc3" size="50" maxlength="50" /></td>
  31.     <td><input name="price3" type="text" id="price3" size="12" maxlength="10" /></td>
  32.     <td><input name="total3" type="text" id="total3" size="12" maxlength="10" /></td>
  33.   </tr>
  34.   <tr>
  35.     <td><input name="item4" type="text" id="item4" size="12" maxlength="10" /></td>
  36.     <td><input name="qty4" type="text" id="qty4" value="" size="7" /></td>
  37.     <td><input name="desc4" type="text" id="desc4" size="50" maxlength="50" /></td>
  38.     <td><input name="price4" type="text" id="price4" size="12" maxlength="10" /></td>
  39.     <td><input name="total4" type="text" id="total4" size="12" maxlength="10" /></td>
  40.   </tr>
  41.   <tr>
  42.     <td><input name="item5" type="text" id="item5" size="12" maxlength="10" /></td>
  43.     <td><input name="qty5" type="text" id="qty5" value="" size="7" /></td>
  44.     <td><input name="desc5" type="text" id="desc5" size="50" maxlength="50" /></td>
  45.     <td><input name="price5" type="text" id="price5" size="12" maxlength="10" /></td>
  46.     <td><input name="total5" type="text" id="total5" size="12" maxlength="10" /></td>
  47.   </tr>
  48.   <tr>
  49.     <td><input name="item6" type="text" id="item6" size="12" maxlength="10" /></td>
  50.     <td><input name="qty6" type="text" id="qty6" value="" size="7" /></td>
  51.     <td><input name="desc6" type="text" id="desc6" size="50" maxlength="50" /></td>
  52.     <td><input name="price6" type="text" id="price6" size="12" maxlength="10" /></td>
  53.     <td><input name="total6" type="text" id="total6" size="12" maxlength="10" /></td>
  54.   </tr>
  55.   <tr>
  56.     <td><input name="item7" type="text" id="item7" size="12" maxlength="10" /></td>
  57.     <td><input name="qty7" type="text" id="qty7" value="" size="7" /></td>
  58.     <td><input name="desc7" type="text" id="desc7" size="50" maxlength="50" /></td>
  59.     <td><input name="price7" type="text" id="price7" size="12" maxlength="10" /></td>
  60.     <td><input name="total7" type="text" id="total7" size="12" maxlength="10" /></td>
  61.   </tr>
  62.   <tr>
  63.     <td><input name="item8" type="text" id="item8" size="12" maxlength="10" /></td>
  64.     <td><input name="qty8" type="text" id="qty8" value="" size="7" /></td>
  65.     <td><input name="desc8" type="text" id="desc8" size="50" maxlength="50" /></td>
  66.     <td><input name="price8" type="text" id="price8" size="12" maxlength="10" /></td>
  67.     <td><input name="total8" type="text" id="total8" size="12" maxlength="10" /></td>
  68.   </tr>
  69.   <tr>
  70.     <td><input name="item9" type="text" id="item9" size="12" maxlength="10" /></td>
  71.     <td><input name="qty9" type="text" id="qty9" value="" size="7" /></td>
  72.     <td><input name="desc9" type="text" id="desc9" size="50" maxlength="50" /></td>
  73.     <td><input name="price9" type="text" id="price9" size="12" maxlength="10" /></td>
  74.     <td><input name="total9" type="text" id="total9" size="12" maxlength="10" /></td>
  75.   </tr>
  76.   <tr>
  77.     <td><input name="item10" type="text" id="item10" size="12" maxlength="10" /></td>
  78.     <td><input name="qty10" type="text" id="qty10" value="" size="7" /></td>
  79.     <td><input name="desc10" type="text" id="desc10" size="50" maxlength="50" /></td>
  80.     <td><input name="price10" type="text" id="price10" size="12" maxlength="10" /></td>
  81.     <td><input name="total10" type="text" id="total10" size="12" maxlength="10" /></td>
  82.   </tr>
  83.   <tr>
  84.     <td colspan="4"><div align="right">Sub-Total</div></td>
  85.     <td><input name="subtotal" type="text" id="subtotal" size="12" maxlength="10" /></td>
  86.   </tr>
  87.   <tr>
  88.     <td colspan="4"><div align="right">Sales Tax (8%)
  89.       </div>      <div align="right"></div></td>
  90.     <td><input name="tax" type="text" id="tax" size="12" maxlength="10" /></td>
  91.   </tr>
  92.   <tr>
  93.     <td colspan="4">
  94.       <div align="right"><strong>Grand Total</strong></div></td>
  95.     <td><input name="grandtotal" type="text" id="grandtotal" size="12" maxlength="10" /></td>
  96.   </tr>
  97. </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
Aug 26 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

9 posts views Thread by Mike Minor | last post: by
reply views Thread by Ennio-Sr | last post: by
7 posts views Thread by Chuck Anderson | last post: by
13 posts views Thread by sonald | last post: by
3 posts views Thread by davncong | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.