Conditional Entry fields. If 'yes' then field appears

That idea already has several topics, old ones.

On C9 roadmap the conditional fields is not mentioned but it would be a great feature.

FYI:

Topic was discussed in this C7 topic.

Related C8 topic by me with thoughts about possible client-side JavaScript solution.

This is very easy to do with custom template. You only add there JS script like that

(function($){

$('input[name^=jform\\[fields\\]\\[10\\]]').on('change', function(){

    if(this.value == -1) {

           $('#filed-23').show();

           $('#filed-25').hide();

    } else {

           $('#filed-23').hide();

           $('#filed-25').show();

    }

});

}(jQuery))

Something like this. Simple add on changed event to boolean field and show or hide some form elements.

And what happens if a conditional field that is hidden is set to required? Will it be processed as we press submit and error popsup or the 'required' will be ignored?

I may try this javascript solution, thanks.

And what happens if a conditional field that is hidden is set to required? Will it be processed as we press submit and error popsup or the 'required' will be ignored?

Will be processed as usual.

Did anyone try to do this for record (not edit form)?

<?php if(isset($item->fields_by_id[ID_x]) && $item->fields_by_id[ID_x]->result == 'Yes'): ?>

<div id="<?php echo 'field-rslt-'.$item->fields_by_id[ID_y]->id; ?>" class="<?php echo $item->fields_by_id[ID_y]->params->get('core.field_class');?><?php echo ($item->fields_by_id[ID_y]->params->get('core.label_break') > 1 ? ' line-brk' : NULL) ?>">

                    <?php echo $item->fields_by_id[ID_y]->result; ?></a>

                </div>

            <?php endif; ?>

PHP will only load or hide based on saved value. I mean you will have to update page or submit form to trigger that.

This task have to be solved with javascript.

(function($){ $('select-element-id').bind('change keyup', function(){ if($(this).val() == 'Yes') { $('block-id1').hide(); $('block-id2').show(); } }); }(jQuery))

This is example block you have to add to formt template at very bottom.

This add listeners on change event on select field that should hide depends on its value.

I've been trying to get Sergey's earlier suggestion with code working on my form template. My knowledge of Javascript is pretty basic so I'm struggling a bit.

(function($){
$('input[name^=jform\\[fields\\]\\[92\\]]').on('change', function(){
if(this.value == "Training") {
$('#field-119').show();
} else {
$('#field-119').hide();
}
});
}(jQuery))

I'm using a select field for hiding/unhiding various fields in the form. The select list has an id of 92 and the field I'm hiding/unhiding has an id of 119. Does this code look ok and do I put it at the end of my form template or within tags.

Code looks ok. The only thing I would make one more function there to trigger it on edit article load.

(function($){
    var select = $('input[name^=jform\\[fields\\]\\[92\\]]');

    showHideFields(select);

    select.on('change', function(){
        showHideFields($(this));
    });

    function showHideFields(el){
        var tohide = $('#field-119');
        if(this.val() == "Training") {
            tohide.show();
        } else {
            tohide.hide();
        }
    }
}(jQuery))

And I would place it at the very bottom of your custom form template.

Thanks Sergey. That all makes sense. Thanks for the help. Eventually I'll learn enough javascript to be dangerous :)

I put the above code at the bottom of my form template below the three functions that are already there. If I display the page, all I see is the page heading and the Apply/Save/etc buttons. Any idea why?

If you give URL to that page I may have a look.

Unfortunately it's behind a firewall so you won't be able to access it. Is there any other information I can provide to help? I've been doing some playing around and it looks like it's only a problem when I use a self-executing function at the end of my template. Other functions seem to exist there fine.

Ue firebug to investigate. See if HTML is there and check if you have any JS error in console.

only HTML of what I see is there (form save/apply/etc buttons). When I use Firebug, I get the following error in the console:

ReferenceError: Joomla is not defined

Which seems to refer to Joomla.submitbutton in the beginning of a javascript (Joomla.submitbutton = function(task)). It appears to be a script defined in views/form/tmpl/default.php and views/record/tmpl/default_comment_form.php. I am using v8.531 by the way.

What is Joomla version?

Version 3.2.2

Hmmm. Then I do not know. See source if those fields on the page at all. First find out it is hidden or not there at all.

This is what I put in my template

(function($){
    $('input[name^=jform\\[fields\\]\\[24\\]]').on('change', function(){
        if(this.value == 1) {
            $('#field-11').show();
        } else {
            $('#field-11').hide();
        }
    });
}(jQuery))

And this is the error I get which is talking about the very first line.

Parse error: syntax error, unexpected '$', expecting '&' or variable (T_VARIABLE) in /home/flyerfly/public_html/submissions/components/com_cobalt/views/form/tmpl/default_form_copyform.php on line 493