Forums

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

bon-ja-mon 18 Mar, 2016
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
GreyHead 18 Mar, 2016
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
bon-ja-mon 18 Mar, 2016
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
GreyHead 18 Mar, 2016
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
bon-ja-mon 21 Mar, 2016
Answer
Many thanks Bob, I forgot that bit. I needed to tweak the syntax a little to get it to work. In case it helps others my end Load JS element now looks like this which does the job for me:

jQuery(document).ready(function (jQ) {
if (jQ('#sendto_lm option:selected').text() == "Yes") {
  jQ('#vat').prop('readonly', true);
}
});


Many thanks
This topic is locked and no more replies can be posted.