How to get the another field if the expected value choose from dropdown in laravel?

Question

I am trying to get another field like interview date field if selected appointed interview from dropdown field,

Here is my view ,

   <form action="{{ route('jobseekers.updatestatus', $jobseekers->id) }}" method="POST">
        {{ csrf_field() }}


                            <div class="form-group">
                                <label for="title"> Choose Status:</label>
                                <?php $status = \App\Status::all(); ?>
                                <select id="val_select" name="status" class="form-control select2">
                                    <option value="{{ $jobseekers->status }}">{{ $jobseekers->mystatus['description'] }}</option>
                                    @foreach($status as $row)
                                        <option value="{{ $row->id }}">
                                            {{ $row->description }} 
                                        </option>
                                    @endforeach
                                </select>
                            </div>


      <div class="form-group"> 
           <form action="{{ route('jobseekers.updatestatus', $jobseekers->id) }}">
                   {{ csrf_field() }}
                   {{ method_field("patch") }}
              <button type="submit" class="btn btn-primary">Update Status</button>
   </form>

So like,if i select Appointed Interview, I want to be another appointed date field appear automatically,otherwise not appear the appointed date field.Is there anyway to do like that?

Answer 1

Use jquery change event on your select box.

First, make your desired field hidden

<form action="{{ route('jobseekers.updatestatus', $jobseekers->id) }}" method="POST">
  {{ csrf_field() }}
  {{ method_field("patch") }}

  <div class="form-group">
      <label for="title"> Choose Status:</label>
      <?php $status = \App\Status::all(); ?>
      <select id="val_select" name="status" class="form-control select2">
          <option value="{{ $jobseekers->status }}">{{ $jobseekers->mystatus['description'] }}</option>
          @foreach($status as $row)
              <option value="{{ $row->id }}">
                  {{ $row->description }} 
              </option>
          @endforeach
      </select>
  </div>

  <div class="form-group hide" id="date-input">
      <label for="title"> Date:</label>
      <input name="date" />         
  </div>

  <div class="form-group">            
    <button type="submit" class="btn btn-primary">Update Status</button>
  </div>
</form>

After that, add a jquery change event listener to your select box

$(function () {
    $('select[name="status"]').change(function () {
        //remove the hide class from date-input
        if ($(this).find(":selected").val() == 'appointed-interview') {
            $('#date-input').removeClass('hide')
        }
    })
})