Simple JS to disable fields works in CF4 but not in CF5

I want to disable a few fields on a form and on my CF4 set up I have used a Load JS action on the On Load event and put it before the Show HTML:

window.addEvent('domready', function() {
$("DefaultAddress").readOnly = true;
$("DefaultPhone").readOnly = true;
});

This works fine. However, on CC5 I cant get it to work??

I used the Load JavaScript action on the On Load event and ensured that the IDs of the 2 fields were DefaultAddress & DefaultPhone, but the fields dont go read only as they do on CC4.

Any ideas on how to fix this please?

Ultimately I am using this way as I want to put an if statement in here to only turn them read only if a certain parameter was met, but I need to get this bit working first.

I dont know if it is related, but I also tried using the Element Event tab from within the form designer, but I couldnt get that to work either.

Kind regards

Hi bon-ja-mon,

The code you have for Cfv4 is using the MooTools library - unfortunately Joomla! has now dropped this in favour of jQuery and so CFv5 no longer loads MooTools.

The equivalent jQuery code will be something like this

jQuery(document).ready(function (jQ) {
  jQ('#DefaultAddress').prop('readonly', true);
  jQ('#DefaultPhone').prop('readonly', true);
});

Or, if you always want to set these you could add readonly=readonly to the Extra Params box of these elements.

Bob

Thanks for the reply - that will explain why the CF4 code no longer works !

Adding the readonly=readonly to the Extra Params box would work if I needed them to always be read only.

The code you posted worked a treat, so now I am looking to expand it to only make it read only if a different field ( a drop down) has the value "Yes". So, on looking up the syntax fro jQuery I can up the the following;

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

if (jQ('#sendto_lm').val() == "Yes") {
  jQ('#vat').prop('readonly', true);
}
{
  jQ('#vat').prop('readonly', false);
}
});

Where sendto_lm is the id of the dropdown. vat is the id of the text box I want to be read only or not.

This didnt work. I have tried a single "=" but again this didnt work. I read somewhere that I could check the value of a text field using the following javascript:

document.getElementById('sendto_lm').value

But I couldnt get this to work either, I am sure it is a simple syntact issue if you could point me in the write direction?

Thanks

Hi bon-ja-mon,

With a select you want the value of the selected option (the select doesn't have a value). Please try

if (jQ('#sendto_lm:selected').val() == "Yes") {

See the .val() doc here

Bob