1

I got a JForm and I got some fields in there. I would like to disable a field, if the value of another field is "0". I know that I can do that by preparing the form while loading, but I want to solve that "live", so if the user clicks around, the readonly should immediately be set or unset.

How can I solve this? I guess I have to do some JQuery - unfortunately I do not have any idea of jQuery and this stuff, so maybe you could help me out?

Thanks in advance :-)

1

Joomla has introduced new form field attribute called "showon" you can add that attribute in form field xml.

Adding the attribute showon allows to hide the field based on the value(s) of another field.

Syntax to show the field "bar" only when "foo" is set to "1":

<field
    name="foo"
    type="list"
    >
    <option value="1">JYES</option>
    <option value="0">JNO</option>
</field>
<field
    name="bar"
    type="text"
    showon="foo:1"
/>

To match multiple values one can provide a comma-separated list of values. Like showon="foo:1,2"

This was introduced with PullRequest: https://github.com/joomla/joomla-cms/pull/3379, available starting with Joomla 3.2.4.

  • To clarify, this will completely hide the form field, not disable it ;) – Lodder May 15 '15 at 13:19
  • Yeah!! I missed "disabled" word here. Nevertheless, for the googlers this answer can be useful in certain case ;) – Sahil Purav May 15 '15 at 13:33
  • Hi, unfortunately this does not work if the field, which should be hidden, has a "multiple"="true"-tag :-( – MyFault May 15 '15 at 14:30
  • You can look at @Lodder answer. I'm agree with his answer and it is the actual way to deal with your issue. – Sahil Purav May 15 '15 at 14:32
0

You can simply achieve this using jQuery by adding the disabled attribute based on the value, like so:

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

    var inputFirst  = $('#jform_choose0');
    var inputSecond = $('#jform_choose1');

    inputFirst.on('change', function(){

        if ($(this).val() == 0) {
            inputSecond.prop('disabled', true);
        }
        else {
            inputSecond.prop('disabled', false);
        }

    });

});

Here is a live preview for you to test:

http://jsfiddle.net/k3s6g2f7/

You will of course need to change the ID's that have been defined according to your own input fields.

  • Hi and thank you very much for your answer. At the moment I got the following HTML-declaration for my fields (generated out of my form.xml): codepad.org/RdA9njdr. Unfortunately this does not work: codepad.org/BBB9D3DT - I'm getting no error on the error-console. – MyFault May 15 '15 at 12:30
  • When the page in your browser and inspect the input element to get the correct ID – Lodder May 15 '15 at 13:48
  • Hi @Lodder, the input is the following (d.pr/n/1gg8G) - but there are in fact more input fields - one for each value (jform_choose0 and jform_choose1). – MyFault May 15 '15 at 14:18
  • It appears you're using numbers in your ID's as well as A-Z characters. So try jform_choose0 and jform_choose0 as the ID's in your jQuery code. I've updated my answer fr you – Lodder May 15 '15 at 14:24
  • HI Lodder, thanks again :-) the thing is: choose0 and choose1 are the elements of the "selector" which is used to activate or deactivate the field "actions" (I illustrated this: d.pr/i/1hGgk ) So your code would deactivate choose1, which is the "Ja" (Yes)-Field of the selector. – MyFault May 15 '15 at 14:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.