How to hide or show from field upon user choice of radio input in php laravel?

Question

i have created a form for user registration but the form will show or hide extra field if the user choose one of them

i have this field:

 <div class="form-group row" style="display:none">
    <label for="spec" class="col-md-4 col-form-label text-md-right"> 
      {{ __('spec') }}
    </label>
    <div class="col-md-6">
        <input id="spec" type="text" class="form-control @error('spec') is-invalid @enderror" name="spec" value="{{ old('spec') }}" autocomplete="spec" autofocus>
      @error('spec')
          <span class="invalid-feedback" role="alert">
              <strong>{{ $message }}</strong>
          </span>
       @enderror
     </div>
  </div>

which is hidden by default

and i have these radio inputs:

 <div>
    <input type="radio" id="css" name="fav_language" value="CSS">
    <label for="css">CSS</label><br>
    <input type="radio" id="javascript" name="fav_language" value="JavaScript">
    <label for="javascript">JavaScript</label>
 </div>

so if the user chose first radio will hide the first field (spec) and if the user chose the 2nd radio the (spec) field will not be hidden anymore

how to achieve this using if statement?

you have to use JavaScript OR jQuery. Look at https://stackoverflow.com/questions/13152927/how-to-use-radio-on-change-event — Devsi Odedra, Oct 29 '21 at 07:22

Cedric Cholley · Accepted Answer · 2021-10-29T21:05:32.540

I mostly agree with Devsi Odedra comment. It would be easier and it would give you more flexibility to use Javascript but you don't have to. There is a solution using CSS only.

To use CSS only the HTML code must be so the div which needs to be hidden or shown has to be a "younger sibling" of the input. In other words the div must be placed at the same level and after the input (no need to be directly after). This way you will be able to combine general sibling selector and :checked pseudo-class selector

.show-only-if-css-is-checked {
  display: none;
}

#css:checked ~ .show-only-if-css-is-checked {
  display: block;
}

<div>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>

  <div class="show-only-if-css-is-checked form-group row">
    <label for="spec" class="col-md-4 col-form-label text-md-right"> 
      {{ __('spec') }}
    </label>
    <div class="col-md-6">
      <input id="spec" type="text" class="form-control @error('spec') is-invalid @enderror" name="spec" value="{{ old('spec') }}" autocomplete="spec" autofocus> @error('spec')
      <span class="invalid-feedback" role="alert">
              <strong>{{ $message }}</strong>
          </span> @enderror
    </div>
  </div>
</div>

CSS part can even be shorter

#css:not(:checked) ~ .show-only-if-css-is-checked {
  display: none;
}

EDIT: I was tempted to remove laravel tag from the question, but what you're trying to achive can be done as well with Laravel livewire

How to hide or show from field upon user choice of radio input in php laravel?

1 Answers1