The following is working ie calculating after the user either loses focus of the fields, or onclick - i would like the functions ‘doTotal’ and ‘calcMenu’ to calculate as the input field is updated (ie 'onKeyup) ?
Would I need to add this line to each of the input fields in order to achieve this:
document.getElementById("fullday1").onkeyup = dototal;
document.getElementById("halfday1").onkeyup = dototal;
document.getElementById("SingleRooms1").onkeyup = dototal;
<form id="quote" action="" method="get"><script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){ jQuery('#quote').change(function (){doTotal(this)}); });
// ]]></script>
<script type="text/javascript">// <![CDATA[
$('#quote').change(function() { calcMenu(this); });
// ]]></script>
<table width="532" border="1" cellspacing="1" cellpadding="0.5">
<tbody>
<tr>
<th scope="col" width="30">
<div align="center">Date</div></th>
<th scope="col" width="128">
<div align="center">Amount of Delegates ½ Day Conference @ R 240 pp</div></th>
<th width="112">
<div align="center">Amount of Delegates Full Day Conference @ R 260 pp</div></th>
<th width="112">
<div align="center">Menu No</div></th>
<th width="112">
<div align="center">Price pp for Menu (1-7: R70, 8-10 R85, 11: R105, 12: R85)</div></th>
<th width="112">
<div align="center">Total Persons for meals</div></th>
<th width="112">
<div align="center">Amount of Single Rooms @ R 480 pp</div></th>
<th width="112">
<div align="center">Amount of Double Rooms @ R 720 pp</div></th>
<th width="134">
<div align="center">Total for the day</div></th>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date1" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday1" size="5" maxlength="10" /></div></td>
<td>
<div align="center"><input type="text" name="fullday1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total1" size="5" /></div></td>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date2" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="fullday2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total2" size="5" /></div></td>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date3" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="fullday3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total3" size="5" /></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</form>
function doTotal(form) {
var a = (+form.halfday1.value);
var b = (+form.fullday1.value);
var c = (+form.SingleRooms1.value);
var d = (+form.DoubleRooms1.value);
form.total1.value = (a * 240) + (b* 260) + (+ form.MenuPrice1.value * form.MealPersons1.value) + (c * 480) + (d * 720) ;
}
var prices = [
{
values: [1,2,3,4,5,6,7],
price: 70
},
{
values: [8,9,10,12],
price: 85
},
{
values: [11],
price: 105
}
];
function calcMenu(form)
{
var i, searchValue = parseInt(form.MenuNo1.value);
form.MenuPrice1.value = '';
for (i in prices)
{
if ($.inArray(searchValue, prices[i].values) != -1)
{
form.MenuPrice1.value = prices[i].price;
}
}
}