A custom JS issue CF4 --> CF5 or 6, don't care

Dear all
​
In an attempt to re-create a CF4 form into either CF5 or 6, I have tried as much as I can to mirror a key custom JS that had been established years ago through this very helpful forum. In short, it's a simple in-form calculation with one complex element, culminating in showing the calculated result in a field ID 'fees_acc'.

It begins simple enough: 'debaters', 'judges', 'observers' are three client groups with three different fee values. Number of clients per group X fee = total fee. Add onto this 'extra_nights' and 'singles' (for single rooms), you receive a total fee_acc (includes accommodation).
​
However, there are two key field values when determining a discount: 'teams' and 'judges'. Should one team bring one judge, no discount applies. Should an 'n' number of teams bring +1 judge, a discount of € 30 applies to all judges, in the case of n+2 (or more), the discount is € 50 per judge (so, we're incentivising teams to bring judges).
​
The JS script co-operatively compiled through this forum back then (CF4) was this:

window.addEvent('domready', function() {
   $('debaters').addEvent('change', rekenen1);
   $('judges').addEvent('change', rekenen1);
   $('observers').addEvent('change', rekenen1);
   $('singles').addEvent('change', rekenen1);
   $('extra_nights').addEvent('change', rekenen1);
});
function rekenen1(){
   var num_teams = $('teams').value;
   var num_judges = $('judges').value;
   var num_extras = num_judges - num_teams;
   var discount = 0;
   if(num_extras > 0) {
      discount = 30;
      if(num_extras > 1) {
         discount = 50;
      }
   }
   $('fees_acc').value = $('debaters').value * 220 + $('judges').value * (220 - discount) + $('observers').value * 350 + $('singles').value * 90 + $('extra_nights').value * 30;
}

...and it worked like a charm as a JS script in the 'Events' section (see here).
​
Now in CF 5 or 6 (I am currently working parallel on both, but prefer CF5 bc of Google Spreadsheet item), nothing happens, and it seems as if some striking change has occured in the way JS is being used.
​
I assume, the change is not significant, but not being a coder myself (which is why I use CF in the first place), I do not see what needs to be done. I have tried adopting principles that may apply to CF 5 (replacing $ with jQuery etc...) but I can't create the same result, or any result for that matter.
​
Any help is much appreciated!
Thanks and have a nice weekend,
Christopher

Hi Christopher,
​
At the time of CFv4 the default Joomla JavaScript library was MooTools and I'm guessing that your script was written to use that. Joomla then switched to use the jQuery library, for a while both were supported but in the recent Joomla releases there is only jQuery. Here is a code snippet that I wrote a while back which shows both MooTools and jQuery versions - that should help you edit your code to a jQuery version
​
MooTools

window.addEvent('domready', function () {
  $('search_btn').addEvent('click', function () {
    var postcode, service;
    postcode = $('postcode').value;
    postcode = postcode.replace(" ", '');
    if (postcode === "EnterPostcode" || postcode === "") {
      alert('Enter Postcode');
    } else if (!postcode.match(/^[a-zA-Z0-9]+$/)) {
      alert('Invalid Postcode');
    } else {
      service = $$('input[name=local]:checked')[0];
      if (service == undefined || service.value === '') {
        alert('Please Select the local service');
      } else {
        window.open("http://www.xxx.uk/Service-Search/Disambiguation/Location?" + service.value + "&locationName=" + postcode, '', '');
      }
    }
  });
});

and jQuery

jQuery(document).ready(function(jQ){
  jQ('#search_btn').click( function () {
    var postcode, service;
    postcode = jQ('#postcode').val();
    postcode = postcode.replace(" ", '');
    if (postcode === "EnterPostcode" || postcode === "") {
      alert('Enter Postcode');
    } else if (!postcode.match(/^[a-zA-Z0-9]+$/)) {
      alert('Invalid Postcode');
    } else {
      service = jQ('input[name=local]:checked');
      if ( service.length <= 0 ) {
        alert('Please Select the local service');
      } else {
        window.open("http://wwwxxx.uk/Service-Search/Disambiguation/Location?" + service.val() + "&locationName=" + postcode, '', '');
      }
    }
  });
});

to call a function in jQuery you can use e.g.

jQ( ".target" ).change(function_name);

​
Bob
​
PS you can use jQuery or $ in place of my jQ - I used jQ as it was short and avoided confusion with the MooTools use of $ The abbreviation is defined in the first line of the jQuery code

Dear Bob
​
Thanks so much for your reply.
​
I've surgically implemented the changes I believe to have identified. Still, it's not running yet. I assume it's just a little something, like a wrong bracket or the use of ('._XXX') versus ('#_XXX'). I am truly sorry, but when you suggested to me how to call a function I really don't know what this means and where I need it😀
​
Here's the jQ-ed code so far:

jQuery(document).ready(function(jQ) {
   jQ('#debaters').change( rekenen1 ) ;
   jQ('#judges').change( rekenen1 ) ;
   jQ('#observers').change( rekenen1 ) ;
   jQ('#singles').change( rekenen1 ) ;
   jQ('#extra_nights').change( rekenen1 ) ;
});
function rekenen1(){
   var num_teams = jQ('#teams').val();
   var num_judges = jQ('#judges').val();
   var num_extras = num_judges - num_teams;
   var discount = 0;
   if(num_extras > 0) {
      discount = 30;
      if(num_extras > 1) {
         discount = 50;
      }
   }
   jQ('#total').val() =  jQ('#debaters').val() * 220 +  jQ('#judges').val() * (220 - discount) +  jQ('#observers').val() * 350 +  jQ('#singles').val() * 90 +  jQ('#extra_nights').val() * 30;
}

​
About this 'rekenen1' function: I assume some Dutch progammer advised me here? Basically, it doesn't matter what to call it, right? Because I determine it in the bottom section anyway, right?
​
Oh, and does it matter in which order the Custom JS is placed in the on load section?
​
Thanks again for your help
Christopher

Hello to all
​
It would be very much helpful if anyone could check the last mentioned jQuery code for mistakes. I assume there is one. Many thanks in advance!
​
Christopher

jQ('#total').val() =  jQ('#debaters').val() * 220 +  jQ('#judges').val() * (220 - discount) +  jQ('#observers').val() * 350 +  jQ('#singles').val() * 90 +  jQ('#extra_nights').val() * 30;

​
Should probably be
​

jQ('#total').val(jQ('#debaters').val() * 220 +  jQ('#judges').val() * (220 - discount) +  jQ('#observers').val() * 350 +  jQ('#singles').val() * 90 +  jQ('#extra_nights').val() * 30);

Thank you! However, it didn't solve the problem.😟

I have two conflicting instructions, however (from two different forums). Can

jQ('#debaters').change( rekenen1 ) ;

work properly? It's been said that I need to change it to

jQ('#debaters').on('change', rekenen1);

...but neither seem to be working as well.
​
I know it's just a little piece of programming but I'm simply not a programmer. Apologies for the confusion and thanks for the help
Christopher

I would really need to have a look properly at how you have it set up. But are there any errors in the console?

Yes:
​
Sry, uploaded same pic twice...
​

OK so replace all instances of "jQ" with "jQuery" except for the one in the function call (as in .ready(function(jQ), which you should probably just have as .ready(function()

That was it!! Thanks!

So what then is the difference between using jQ vs jQuery vs $ ?

Just the way Joomla is set up, can't use the $ namespace or something

Hi Christopher,
​
"So what then is the difference between using jQ vs jQuery vs $ ?"
​
jQuery is the default namespace used by jQuery itself to identify it's functions and methods. Joomla uses $ in place of this - but there was a time when the MooTools library used $ and so when both were in use on the same site you needed to use jQuery to differentiate. I found jQuery inconvenient to type many times a day so used jQ instead - you can define the short version when you call the library as in

jQuery(document).ready(function(jQ) {
  . . .
}

​
The problem with your code is that the function rekening() is outside that definition:

jQuery(document).ready(function(jQ) { 
  . . .
}
function rekening() {
  . . .
}

to use the jQ abbreviation it needs to be inside

jQuery(document).ready(function(jQ) {
  . . .
  function rekening() {
    . . .
  }
}

Bob

Ah, alright!
​
Thanks for the clarification! I'll now get to adding the multiple +1 field features into databanks. See how that goes. You may hear from me again😀

Best regards!
Christopher