Jacascript not working

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

ca

cappleby 11 Jan, 2017

Very Helpful,

Thank you, Siah

Forums

Jacascript not working