How can I calculate HTML form fields

futr_vision
futr_vision used Ask the Experts™
on
I have a form (see code below) where a user can input quantity of an item. I'd like to have the second text field populate(in the Total column) with the total price for each row and have the last text field in the last row calculate the sum of the Total column. How do you do this?
<table width="459" border="0" cellpadding="3">
              <tr>
                <td width="207" align="right">First Name: </td>
                <td colspan="3"><input type="text" name="fName" id="fName" /></td>
              </tr>
              <tr>
                <td align="right">Last Name:</td>
                <td colspan="3"><input type="text" name="lName" id="lName" /></td>
              </tr>
              <tr>
                <td align="right"><p>E-Mail:</p></td>
                <td colspan="3"><input type="text" name="email" id="email" /></td>
              </tr>
              <tr>
                <td align="right">Phone:</td>
                <td colspan="3"><input type="text" name="phone" id="phone" /></td>
              </tr>
              <tr>
                <td align="right">Fax:</td>
                <td colspan="3"><input type="text" name="fax" id="fax" /></td>
              </tr>
              <tr>
                <td align="right">&nbsp;</td>
                <td colspan="3">&nbsp;</td>
              </tr>
              <tr>
                <td align="right"><strong>PRODUCTS</strong></td>
                <td align="center"><strong>QTY</strong></td>
                <td align="left"><strong>PRICE</strong></td>
                <td align="left"><strong>TOTAL</strong></td>
              </tr>
              <tr>
                <td height="30" align="right"><strong>2004 <em>Cabernet Sauvignon</em></strong></td>
                <td width="32"><input name="wine8" type="text" id="wine8" size="5" /></td>
                <td width="72" align="left">                  x $9.28</td>
                <td width="114" align="left">=
                  <input name="textfield" type="text" id="textfield" size="8" /></td>
              </tr>
              <tr>
                <td align="right"><strong>2004  &nbsp;</strong><em><strong>Syra</strong></em><em><strong>h</strong></em>&nbsp;</td>
                <td><input name="wine9" type="text" id="wine9" size="5" /></td>
                <td align="left">                  x $9.28</td>
                <td align="left">=
                  <input name="textfield2" type="text" id="textfield2" size="8" /></td>
              </tr>
              <tr>
                <td align="right"><strong>2004 </strong><em><strong>LuminousBlend </strong></em></td>
                <td><input name="wine10" type="text" id="wine10" size="5" /></td>
                <td align="left">                  x $11.03</td>
                <td align="left">=
                  <input name="textfield3" type="text" id="textfield3" size="8" /></td>
              </tr>
              <tr>
                <td align="right"><strong>2004 </strong><em><strong>DuosBlend </strong></em></td>
                <td><input name="wine1" type="text" id="wine1" size="5" /></td>
                <td align="left">                  x $10.33</td>
                <td align="left">=
                  <input name="textfield4" type="text" id="textfield4" size="8" /></td>
              </tr>
              <tr>
                <td align="right"><strong>2002 <em>SuperTuscan</em> Blend </strong></td>
                <td><input name="wine2" type="text" id="wine2" size="5" /></td>
                <td align="left"> x $9.80</td>
                <td align="left">=
                  <input name="textfield5" type="text" id="textfield5" size="8" /></td>
              </tr>
              <tr>
                <td align="right"><strong>2002 <em>Syrah</em></strong></td>
                <td><input name="wine3" type="text" id="wine3" size="5" /></td>
                <td align="left"> x $9.28</td>
                <td align="left">=
                  <input name="textfield6" type="text" id="textfield6" size="8" /></td>
              </tr>
              <tr>
                <td align="right"><strong>2003 <em>SuperTuscan</em> Blend </strong></td>
                <td><input name="wine4" type="text" id="wine4" size="5" /></td>
                <td align="left"> x $10.50</td>
                <td align="left">=
                  <input name="textfield7" type="text" id="textfield7" size="8" /></td>
              </tr>
              <tr>
                <td align="right"><strong>2003 <em>Syrah</em></strong></td>
                <td><input name="wine5" type="text" id="wine5" size="5" /></td>
                <td align="left"> x $9.28</td>
                <td align="left">=
                  <input name="textfield8" type="text" id="textfield8" size="8" /></td>
              </tr>
              <tr>
                <td align="right"><strong>2004 <em>Accense - Sangiovese</em></strong></td>
                <td><input name="wine6" type="text" id="wine6" size="5" /></td>
                <td align="left"> x $9.10</td>
                <td align="left">=
                  <input name="textfield9" type="text" id="textfield9" size="8" /></td>
              </tr>
              <tr>
                <td align="right"><strong>2007 <em>Prelude - Viognier</em></strong></td>
                <td><input name="wine7" type="text" id="wine7" size="5" /></td>
                <td align="left"> x $7.70</td>
                <td align="left">=
                  <input name="textfield10" type="text" id="textfield10" size="8" /></td>
              </tr>
              <tr>
                <td height="35" align="right">&nbsp;</td>
                <td>&nbsp;</td>
                <td align="right"><strong>TOTAL:</strong></td>
                <td align="center"><input name="textfield11" type="text" id="textfield11" size="10" /></td>
              </tr>
              <tr>
                <td align="right">&nbsp;</td>
                <td colspan="3">&nbsp;</td>
              </tr>
              <tr>
                <td align="right">&nbsp;</td>
                <td colspan="3" align="center"><input type="submit" name="submit" id="submit" value="Place Order " /></td>
              </tr>
              <tr>
                <td align="right">&nbsp;</td>
                <td colspan="3">&nbsp;</td>
              </tr>
              <tr>
                <td align="right">&nbsp;</td>
                <td colspan="3">&nbsp;</td>
              </tr>
            </table>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Greg AlexanderLead Developer

Commented:
Are you cool with it being jQuery?

Author

Commented:
I imagine there was some type of javascript involved so I guess jQuery would be fine. I'm not a programmer so I don;t know what the drawbacks or benefits will be.
leakim971Multitechnician
Top Expert 2014

Commented:
Do you need anything else ?
Mean only :
1 - calculate quantity * price and set last column with result and
2 - sum last columns of all row and put total in last row
Why Diversity in Tech Matters

Kesha Williams, certified professional and software developer, explores the imbalance of diversity in the world of technology -- especially when it comes to hiring women. She showcases ways she's making a difference through the Colors of STEM program.

Lead Developer
Commented:
Just download jquery.js
http://jquery.com

And use this
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
//set pricing here
var wine1 = '10.33';
var wine2 = '9.80';
var wine3 = '9.28';
var wine4 = '10.50';
var wine5 = '9.28';
var wine6 = '9.10';
var wine7 = '7.70';
var wine8 = '9.28';
var wine9 = '9.28';
var wine10 = '11.03';
$(document).ready(function(){
 
	$(".calc").keyup(function(){
		if(isNaN($(this).val())){
			alert("Please enter numbers only");
		}else{
			current_ele_id = $(this).attr("id");
			$("#"+current_ele_id+"_total").val(Math.round((eval(current_ele_id) * $("#"+current_ele_id).val()) * 100) / 100);
			total_vars();
		}
	});
 
});
 
function total_vars(){
	var final_total = 0;
	$(".totals").each(function(){
		if($(this).val() == ''){}else{
			//final_total = parseFloat(Math.round((final_total + $(this).val()) * 100) / 100);
			final_total = parseFloat(final_total) + parseFloat(Math.round(($(this).val()) * 100) / 100);
		}
	});	
	
	grand_total = Math.round(final_total * 100) / 100;
	$("#total").val(grand_total);
}
 
</script>
<table width="459" border="0" cellpadding="3">
              <tr>
                <td width="207" align="right">First Name: </td>
                <td colspan="3"><input type="text" name="fName" id="fName" /></td>
              </tr>
              <tr>
                <td align="right">Last Name:</td>
                <td colspan="3"><input type="text" name="lName" id="lName" /></td>
              </tr>
              <tr>
                <td align="right"><p>E-Mail:</p></td>
                <td colspan="3"><input type="text" name="email" id="email" /></td>
              </tr>
              <tr>
                <td align="right">Phone:</td>
                <td colspan="3"><input type="text" name="phone" id="phone" /></td>
              </tr>
              <tr>
                <td align="right">Fax:</td>
                <td colspan="3"><input type="text" name="fax" id="fax" /></td>
              </tr>
              <tr>
                <td align="right">&nbsp;</td>
                <td colspan="3">&nbsp;</td>
              </tr>
              <tr>
                <td align="right"><strong>PRODUCTS</strong></td>
                <td align="center"><strong>QTY</strong></td>
                <td align="left"><strong>PRICE</strong></td>
                <td align="left"><strong>TOTAL</strong></td>
              </tr>
              <tr>
                <td height="30" align="right"><strong>2004 <em>Cabernet Sauvignon</em></strong></td>
                <td width="32"><input name="wine8" type="text" id="wine8" size="5" class="calc"/></td>
                <td width="72" align="left">                  x $9.28</td>
                <td width="114" align="left">=
                  <input name="wind" type="text" id="wine8_total" size="8" class="totals" /></td>
              </tr>
              <tr>
                <td align="right"><strong>2004  &nbsp;</strong><em><strong>Syra</strong></em><em><strong>h</strong></em>&nbsp;</td>
                <td><input name="wine9" type="text" id="wine9" size="5"  class="calc"/></td>
                <td align="left">                  x $9.28</td>
                <td align="left">=
                  <input name="textfield2" type="text" id="wine9_total" size="8" class="totals"/></td>
              </tr>
              <tr>
                <td align="right"><strong>2004 </strong><em><strong>LuminousBlend </strong></em></td>
                <td><input name="wine10" type="text" id="wine10" size="5"  class="calc"/></td>
                <td align="left">                  x $11.03</td>
                <td align="left">=
                  <input name="textfield3" type="text" id="wine10_total" size="8" class="totals"/></td>
              </tr>
              <tr>
                <td align="right"><strong>2004 </strong><em><strong>DuosBlend </strong></em></td>
                <td><input name="wine1" type="text" id="wine1" size="5"  class="calc"/></td>
                <td align="left">                  x $10.33</td>
                <td align="left">=
                  <input name="textfield4" type="text" id="wine1_total" size="8" class="totals"/></td>
              </tr>
              <tr>
                <td align="right"><strong>2002 <em>SuperTuscan</em> Blend </strong></td>
                <td><input name="wine2" type="text" id="wine2" size="5"  class="calc"/></td>
                <td align="left"> x $9.80</td>
                <td align="left">=
                  <input name="textfield5" type="text" id="wine2_total" size="8" class="totals"/></td>
              </tr>
              <tr>
                <td align="right"><strong>2002 <em>Syrah</em></strong></td>
                <td><input name="wine3" type="text" id="wine3" size="5"  class="calc"/></td>
                <td align="left"> x $9.28</td>
                <td align="left">=
                  <input name="textfield6" type="text" id="wine3_total" size="8" class="totals"/></td>
              </tr>
              <tr>
                <td align="right"><strong>2003 <em>SuperTuscan</em> Blend </strong></td>
                <td><input name="wine4" type="text" id="wine4" size="5"  class="calc"/></td>
                <td align="left"> x $10.50</td>
                <td align="left">=
                  <input name="textfield7" type="text" id="wine4_total" size="8" class="totals" /></td>
              </tr>
              <tr>
                <td align="right"><strong>2003 <em>Syrah</em></strong></td>
                <td><input name="wine5" type="text" id="wine5" size="5" class="calc" /></td>
                <td align="left"> x $9.28</td>
                <td align="left">=
                  <input name="textfield8" type="text" id="wine5_total" size="8" class="totals"/></td>
              </tr>
              <tr>
                <td align="right"><strong>2004 <em>Accense - Sangiovese</em></strong></td>
                <td><input name="wine6" type="text" id="wine6" size="5" class="calc" /></td>
                <td align="left"> x $9.10</td>
                <td align="left">=
                  <input name="textfield9" type="text" id="wine6_total" size="8" class="totals"/></td>
              </tr>
              <tr>
                <td align="right"><strong>2007 <em>Prelude - Viognier</em></strong></td>
                <td><input name="wine7" type="text" id="wine7" size="5" class="calc" /></td>
                <td align="left"> x $7.70</td>
                <td align="left">=
                  <input name="textfield10" type="text" id="wine7_total" size="8" class="totals"/></td>
              </tr>
              <tr>
                <td height="35" align="right">&nbsp;</td>
                <td>&nbsp;</td>
                <td align="right"><strong>TOTAL:</strong></td>
                <td align="center"><input name="textfield11" type="text" id="total" size="10" /></td>
              </tr>
              <tr>
                <td align="right">&nbsp;</td>
                <td colspan="3">&nbsp;</td>
              </tr>
              <tr>
                <td align="right">&nbsp;</td>
                <td colspan="3" align="center"><input type="submit" name="submit" id="submit" value="Place Order " /></td>
              </tr>
              <tr>
                <td align="right">&nbsp;</td>
                <td colspan="3">&nbsp;</td>
              </tr>
              <tr>
                <td align="right">&nbsp;</td>
                <td colspan="3">&nbsp;</td>
              </tr>
            </table>

Open in new window

Author

Commented:
Nice. So all that javascript goes up in the head right?
Greg AlexanderLead Developer

Commented:
Yes, sorry about that... all goes in the head

Author

Commented:
Is there a way to stick a dollar sign in those calculated totals or is it best to just hard code that in before the field?
Greg AlexanderLead Developer

Commented:
I would hard code it because I you would have to rewrite the javascript to handle charaters..

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial