Autosum text fields possible??

davncong · #1 August 26th, 2008, 05:22 AM

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 · #2 August 26th, 2008, 07:10 AM

Quote:

Originally Posted by davncong

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 · #3 August 26th, 2008, 09:25 AM

Quote:

Originally Posted by Dormilich

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 · #4 August 26th, 2008, 04:03 PM

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

 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

Expand|Select|Wrap|Line Numbers

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

is added to the header on the HTML.

I added

Expand|Select|Wrap|Line Numbers

 <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...

Expand|Select|Wrap|Line Numbers

 <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

Autosum text fields possible??

Popular Articles

What is Bytes?