futr_vision
asked on
How can I calculate HTML form fields
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"> </td>
<td colspan="3"> </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 </strong><em><strong>Syra</strong></em><em><strong>h</strong></em> </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"> </td>
<td> </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"> </td>
<td colspan="3"> </td>
</tr>
<tr>
<td align="right"> </td>
<td colspan="3" align="center"><input type="submit" name="submit" id="submit" value="Place Order " /></td>
</tr>
<tr>
<td align="right"> </td>
<td colspan="3"> </td>
</tr>
<tr>
<td align="right"> </td>
<td colspan="3"> </td>
</tr>
</table>
Greg Alexander
Are you cool with it being jQuery?
ASKER
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.
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Nice. So all that javascript goes up in the head right?
Yes, sorry about that... all goes in the head
ASKER
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?
I would hard code it because I you would have to rewrite the javascript to handle charaters..