conditional visibility of two fields

[blondie63]

I need to manage the conditional visibility of two fields in one of my Cruds, I asked chatGPT who proposed this code but it fails, is it wrong? Are there better methods?

protected function setupCreateOperation()
{
    CRUD::field([
        'name'        => 'gioco',
        'label'       => "Gioco",
        'type'        => 'select_from_array',
        'options'     => [1 => 'SuperEnalotto', 2 => 'Eurojackpot'],
        'allows_null' => false,
        'default'     => 1,
    ]);

    CRUD::field([
        'name' => 'giocate_superenalotto',
        'label' => 'Giocate SuperEnalotto',
        'type' => 'repeatable',
        'subfields' => [
            [
                'name'  => 'giocata',
                'label' => "Giocata",
                'type'  => 'custom_superenalotto_numbers',
            ],
            [
                'name'  => 'enabled',
                'label' => "Abilitata",
                'type'  => 'checkbox',
            ]
        ],
        'wrapperAttributes' => [
            'class' => 'form-group col-md-12'
        ],
        'visibleInForm' => false, // Initially hidden
    ]);

    CRUD::field([
        'name' => 'giocate_eurojackpot',
        'label' => 'Giocate Eurojackpot',
        'type' => 'repeatable',
        'subfields' => [
            [
                'name'  => 'giocata',
                'label' => "Giocata",
                'type'  => 'custom_eurojackpot_numbers',
            ],
            [
                'name'  => 'enabled',
                'label' => "Abilitata",
                'type'  => 'checkbox',
            ]
        ],
        'wrapperAttributes' => [
            'class' => 'form-group col-md-12'
        ],
        'visibleInForm' => false, // Initially hidden
    ]);

    // Add custom JavaScript to manage field visibility
    \Backpack\CRUD\app\Library\Widget::add([
        'type' => 'script',
        'content' => '
            function toggleFields(value) {
                if(value == "1") {
                    $(".form-group[giocate_superenalotto]").show();
                    $(".form-group[giocate_eurojackpot]").hide();
                } else if(value == "2") {
                    $(".form-group[giocate_superenalotto]").hide();
                    $(".form-group[giocate_eurojackpot]").show();
                }
            }
            $(document).ready(function() {
                toggleFields($("select[name=gioco]").val());
                $("select[name=gioco]").change(function() {
                    toggleFields($(this).val());
                });
            });
        '
    ]);
}

Thanks for help

[blondie63]

I've found another solution looking backpack demo :)
on create method i add my js with Widget::add()->type('script')->content('assets/js/myjs.js');

and there i set my feature about fields

[karandatwani92]

Hey @blondie63

I'm happy to know you found it, and I hope you are utilizing the CrudField JavaScript Library there.

Here is quick tutorial also for help!

[blondie63]

@karandatwani92 Is it possible to change a crud field property by js?
for example i’d like to change the custom field type
or add a new crud field

[karandatwani92]

You can change the HTML input type but not the Backpack Field type on the client side.

You can add both and then show/hide as per your need/selection. I did the following in one of my projects:

crud.field('transaction_type').onChange(function(field) {
    if (field.value == 'Sale') {
        crud.field('customer_id').show().enable();
        crud.field('supplier_id').hide().disable();
    } else {
        crud.field('customer_id').hide().disable();
        crud.field('supplier_id').show().enable();
    }
 }).change();

[blondie63]

@karandatwani92 So i can create two crud field with same field name and different custom_type, then enable one of two, right ?

[karandatwani92]

No, you can not create two fields with the same name.
In the above example, I have two fields: customer_id and supplier_id. I hide one or another as needed.

[blondie63]

@karandatwani92 ok thanks, can you help me on this ?
#957