Hide fields depending on the value in a list

Question

Hide fields depending on the value in a list

Navigation

#1 by (1 votes)

0

I'm working laravel 5.5

I have this list on my form, The values shown are PHYSICAL and VIRTUAL:

{!! Form::mySelect('id_uso', 'Uso', App\Usos::pluck('nombre', 'id')->toArray(), null, ['class'=>'chosen']) !!}

and I would like if the Physical value is selected in the list, the following fields are shown:

{!! Form::myInput('text', 'marca', 'Marca', ['required']) !!}
{!! Form::myInput('text', 'modelo', 'Modelo', ['required']) !!}
{!! Form::myInput('text', 'mac', 'Mac', ['required']) !!}
{!! Form::myInput('text', 'serial', 'Serial', ['required']) !!}

and in case the selected option is VIRTUAL, hide them.

I think it would be better if I could change them to a Radiobutton, but I have no idea how to do it.

I appreciate your help.

Happy day.

EDIT:

So that's how it is after the modification.

php laravel postgresql

asked by Omar Noa 15.08.2018 в 19:05

source

1 answer

how to accommodate AJAX JSON for search filtering? Drop-down list with required value Laravel 5.5

score 1 · Accepted Answer

You must identify the event when the selected option of your list is changed and based on the selected value, hide / show the fields.

For the case you mention, you can add the attribute "id" to the list of uses and be able to identify it within your page, for example:

{!! Form::mySelect('id_uso', 'Uso', App\Usos::pluck('nombre', 'id')->toArray(), null, ['id' => 'listaUsos', 'class'=>'chosen']) !!}

for the case of the fields, as there are several elements, you can add a custom class attribute, for example:

{!! Form::myInput('text', 'marca', 'Marca', ['required', 'class' => 'requerido-con-fisico']) !!}
{!! Form::myInput('text', 'modelo', 'Modelo', ['required', 'class' => 'requerido-con-fisico']) !!}
{!! Form::myInput('text', 'mac', 'Mac', ['required', 'class' => 'requerido-con-fisico']) !!}
{!! Form::myInput('text', 'serial', 'Serial', ['required', 'class' => 'requerido-con-fisico']) !!}

and add the following jquery code to your page:

$(function() {
    $("#listaUsos").change(function(){
        if($("option:selected", this).text() == 'FISICO'){
            $(".requerido-con-fisico").show();
        }else{
            $(".requerido-con-fisico").hide();                
        }
    });
});

with this, when changing the option of the list, if the text is "PHYSICAL", all the elements with the class "required-with-physical" will be shown on the screen, otherwise they will be hidden.

Greetings.