JS Load Issue

I backed up and restored a form the same version of Joomla (3.9.1) and CF (v5), and installed JQuery Easy; however, the Load JS actions don't appear to be working. Not sure what could be the culprit, but the new site uses a different template. Any guidance on what to troubleshoot would be very helpful. Thanks!

Turn off JQuery Easy maybe, I think v5 uses MooTools or something anyway

Hi wibadd,
​
I'm pretty certain that CFv5 uses jQuery - have you checked that your JS is written using jQuery.
​
I think that there is also an option in jQuery Easy to 'turn off' MooTools if that is still being loaded.
​
Lastly, check with your browser web developer tools to see exactly what is happening. Is the code being loaded, are there JS errors on the page that need to be fixed, . . .
​
Bob

My bad, I just shouldn't comment on v5 threads

Hi, Bob -

I have not rewritten in jQuery because I understood that JS can still be used, and JS/jQuery is definitely not my strong suit.

Here is what I found using the dev tools:
TypeError: window.addEvent is not a function


Here is the JS from the form:

window.addEvent('load', function() {
var orgname = $('legal_name');
$('agreement_org_name1').innerHTML = orgname.value;
$('agreement_org_name2').innerHTML = orgname.value;
$('agreement_org_name3').innerHTML = orgname.value;
// execute the check after each keystroke
orgname.addEvent('keyup', function() {
$('agreement_org_name1').innerHTML = orgname.value;
$('agreement_org_name2').innerHTML = orgname.value;
$('agreement_org_name3').innerHTML = orgname.value;
});
});


window.addEvent('load', function() {
var sponsorship_amount;
if ($('level').value == 'Exhibitor') {
sponsorship_amount = 2000;
} else if ($('level').value == 'Premier') {
sponsorship_amount = 1500;
} else if ($('level').value == 'Gold') {
sponsorship_amount = 1000;
} else if ($('level').value == 'Silver') {
sponsorship_amount = 500;
} else {
sponsorship_amount = "";
}
$('display_amount').innerHTML = sponsorship_amount;
$('level').addEvent('change', function() {
if ($('level').value == 'Exhibitor') {
sponsorship_amount = 2000;
} else if ($('level').value == 'Premier') {
sponsorship_amount = 1500;
} else if ($('level').value == 'Gold') {
sponsorship_amount = 1000;
} else if ($('level').value == 'Silver') {
sponsorship_amount = 500;
} else {
sponsorship_amount = "";
}
$('display_amount').innerHTML = sponsorship_amount;
});
});

Should I assume that rewriting this in jQuery could resolve the issue?

Thanks,
Chad

Hi Chad,
​
It looks as though that is written using the MooTools JavaScript library which is no longer included with Joomla! or with ChronoForms.
​
You can try loading the library separately but that can cause other problems - better to get your script updated to use the jQuery Library (or in basic JavaScript).
​
Bob

Admittedly, I am a total novice at this, but I took a stab at rewriting part of it. What I'm trying to figure out is how to display the sp_amount back to the user when they select a level. I obviously have this wrong because I have am amount field, but it isn't displaying anything. Instead, it disabled the showing of the container that holds the amount and other fields. I'd be happy to buy a coffee and pint for a little help and direction!

jQuery(document).ready(function (jQ) {
jQ('#level').change(function () {
var sp_level = $(this).val();
var sp_amount;
if (sp_level == 'Exhibitor') {
sp_amount = '$2,000';
} else if (sp_level == 'Premier'){
sp_amount = '$1,500';
} else if (sp_level == 'Gold'){
sp_amount = '$1,000';
} else if (sp_level == 'Silver'){
sp_amount = '$500';
} else {
sp_amount = "";
}
JQ('#amount').html(sp_amount);
});
});

After much research and trial-and-error, I finally solved this issue and wanted to post it here in case others have a similar issue/need.

JQ('#level').change(function () {
var selectedOption = JQ('#level option:selected').val();
var sp_amount = '';
if (selectedOption === 'Exhibitor') {
sp_amount = '$2,000';
} else if (selectedOption === 'Premier'){
sp_amount = '$1,500';
} else if (selectedOption === 'Gold'){
sp_amount = '$1,000';
} else if (selectedOption === 'Silver'){
sp_amount = '$500';
}
JQ('#sp_cost').text(sp_amount);
});

I added <span id='sp_cost'></span> in a Custom element to display the value.