Fire Javascript calculations on field update

JavaScript
1

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;
        }
    }
}
2

Hi,

I would do it with jQuery, sseing as how you are using that anyway.

You currently have:

$('#quote').change(function (){
  doTotal(this);
  calcMenu(this);
});

change it to this:

$('#quote').keyup(function (){
  doTotal(this);
  calcMenu(this);
});
3

@Pullo - Thank you so so much ! It works beautifully :slight_smile:

4

No probs :slight_smile:

5

Hi Pullo
I have recently had some issues with jquery, and my calculation no longer works? and I pasted it exactly a you have it, and I am getting this message now:
Uncaught TypeError: Property ‘$’ of object [object Object] is not a function

I downgraded from jquery 1.8 to version 1.7.2 as that is what my wordpress installation is choosing.

can I alter this so it is compatible with version 1.7.2?

Thankyou

6

Hi,

Can you post a link to your page?
It would be easier if I could have a look.

7

Hi there. Thank you for your reply
Sure, http://www.airport-game-lodge.co.za/?page_id=2229

8

Password noted. Maybe you want to delete it from this public forum?

9

Hi,

Yeah, jQuery is running in compatibility mode.

Change this:

$('#quote').keyup(function (){
  doTotal(this);
  calcMenu(this);
});

to this:

jQuery('#quote').keyup(function (){
  doTotal(this);
  calcMenu(this);
});

That should sort things out.

10

Thank you so much. it is now calculating, however the second calculation (calcMenu) is not working?

Uncaught TypeError: Cannot call method ‘inArray’ of undefined www.airport-game-lodge.co.za:178
calcMenu www.airport-game-lodge.co.za:178
(anonymous function) www.airport-game-lodge.co.za:329
f.event.dispatch jquery.js:3
h.handle.i

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;
    }
}

}

11

Hi,

It’s the same thing.

Just change:

if ($.inArray(searchValue, prices[i].values) != -1)

into

if (jQuery.inArray(searchValue, prices[i].values) != -1)

and it’ll work.

12

oh! I see now, the $ is replaced with jQuery…great
thank you very much