Jacascript not working

How to fix a JavaScript calculation script that fails to update form totals.

Overview

The issue is caused by a variable name mismatch and a case sensitivity error in the element ID.
Ensure the variable names are consistent and match the case of the element IDs exactly. Also, verify that the script correctly handles undefined values.

Answered
ca cappleby 10 Dec, 2016
I have two or three forms with javascriopt that takes input values and adds them to give the total but when I tried to add this script to another form id doesn't do anything. the script is as follows:

<?php
JHtml::_('jquery.framework');
?>

jQuery(document).ready(function(jQ){
        jQ('#Subs').click(calc);
        jQ('#Subs1').click(calc);
        jQ('#fees').click(calc);
        jQ('#EfacDonation').change(calc);
        jQ('#Total').click(calc);
        jQ('#Donation').change(calc);

	function calc() {
	var don1, don2, sum1, sum2, sum3, sum4, sub, don, fees;
        fees = 0;
	sub = 0;
        don1 = 0;
        don2 = 0;
        sum1 = 0;
        fees = jQ('input[name=Fees]:checked').val();
        if(fees === undefined){sub = 0;}
	don1 = jQ('#Donation').val();
        if(don1 === ''){don1 = 0;}
        sub = jQ('input[name=Subs]:checked').val();
        if(sub === undefined){sub = 0;}
	don2 = jQ('#EfacDonation').val();
        if(don2 === ''){don2 = 0;}
	sum1 = parseInt(fees);	
	sum2 = parseInt(sub);
        sum3 = parseInt(don1);
        sum4 = parseInt(don2);
        sum = (sum1 + sum2 + sum3 + sum4);
	jQ('#total').val(sum);
}
});

I can't see any obvious errors in my javascript, but I may be missing something.

Any help would be welcome.
Thanks
Gr GreyHead 10 Dec, 2016
Hi cappleby,

I suspect that the undefined checks won't do anything as you have just defined those variables, that might be the problem.

Bob
ca cappleby 11 Dec, 2016
Answer
Thanks Bob,

yes. I'd redifined one of the variables :-( - and on reviewing it I'd also used a lower case rather than upper case on the Total variable so it wasn't updating.

For completeness here is my final working code:
<?php
JHtml::_('jquery.framework');
?>

jQuery(document).ready(function(jQ){
        jQ('#Subs').click(calc);
        jQ('#Subs1').click(calc);
        jQ('#Fees').click(calc);
        jQ('#Fees1').click(calc);
        jQ('#Fees2').click(calc);
        jQ('#Fees3').click(calc);
        jQ('#Donation').change(calc); 
        jQ('#EfacDonation').change(calc);
        jQ('#Total').click(calc);
       

	function calc() {
	var don1, don2, sum1, sum2, sum3, sum4, sub, don, fees;
        fee = 0;
	sub = 0;
        don1 = 0;
        don2 = 0;
        sum1 = 0;
        fee = jQ('input[name=Fees]:checked').val();
        if(fee === undefined){fee = 0;}
	don1 = jQ('#Donation').val();
        if(don1 === ''){don1 = 0;}
        sub = jQ('input[name=Subs]:checked').val();
        if(sub === undefined){sub = 0;}
	don2 = jQ('#EfacDonation').val();
        if(don2 === ''){don2 = 0;}
	sum1 = parseInt(fee);	
	sum2 = parseInt(sub);
        sum3 = parseInt(don1);
        sum4 = parseInt(don2);
        sum = (sum1 + sum2 + sum3 + sum4);
	jQ('#Total').val(sum);
}
});
Si Siah 03 Jan, 2017
1 Likes
You could also use longer selectors and minify your code:


jQ('#Suns, #Subs1, #Fees, #Fees1, #Fees2, #Fees3, #Total').click(calc);
jQ('#Donation, #EfacDonation').change(calc); 
This topic is locked and no more replies can be posted.