Search code examples
ajaxlaraveldropdown

RE - Laravel: Auto fill input after selecting value from dropdown

Im having trouble to retrieve data into input box right after user select from dropdown. Any suggestion? Last suggest was not working.

internalaudit.blade.php

        <div class="form-group">
            {!! Form::label('text', 'Doc No', ['class' => 'col-lg-3 control-label']) !!}
            <div class="col-lg-10">
                <select name="docNo" id="docNo" class="form-control" style="width:250px">

                    @foreach ($soplists as $soplist)
                    <option value="{{ $soplist->id }}">{{ $soplist->doc_no }}</option>
                    @endforeach
                </select>
            </div>
        </div>




        <input type="text" class="form-control" name="rev_no" id="rev_no">

          <input type="text" class="form-control" name="title" id="title">

Ajax

 <script>
     $('#docNo').change(function() {
         var id = $(this).val();
         var url = '{{ route("getDetails", ":id") }}';
         url = url.replace(':id', id);

         $.ajax({
             url: url,
             type: 'get',
             dataType: 'json',
             success: function(response) {
                 if (response != null) {
                     $('#rev').val(response.rev_no);
                     $('#title').val(response.title);
                 }
             }
         });
     });

Controller

 public function internalAudit()
    {

        /*Generate number*/
        $query = Cars::latest()->first(); //get last query
        $validators = User::all();
        $departments =  Department::all();
        $isolists =  isoList::all();
        $soplists =  sopList::all();

        $ex = explode('/', $query['iaCarRefNo']); //explode last number from DB

        $type = strtoupper(Request::segment(2)); //get type from url

        if (empty($query->iaCarRefNo)) {
            $number = '1';
            $nextNumber = 'PLW' . '/' . date('y') . $type . '/' . sprintf("%03d", $number);
        } else {
            $number = $ex[2] + 1;
            $nextNumber = 'PLW' . '/' . date('y') . $type . '/' . sprintf("%03d", $number);
        }


        return view('cars.internalaudit', compact('nextNumber', 'validators', 'departments', 'isolists', 'soplists'));
    }


    public function getDetails($id = 0)
    {
        $data = sopList::where('doc_no', $id)->first();
        return response()->json($data);
    }

Route

Route::get('get/details/{id}', 'internalAuditController@getDetails')->name('getDetails');

Route::get('/internalaudit', 'internalAuditController@internalAudit');

Route::post('/internalaudit', ['as' => 'internalaudit.store', 'uses' => 'internalAuditController@store']);

Database sop_list table image link

https://ibb.co/SwkJhLc

Dropdown and input image

https://ibb.co/0VN3Z2y

Network tab

https://ibb.co/56w5BLD

Solution

  • enter image description here Accoding to your console.log there are 2 errors $.ajax is not function and $.(...) datetimepicker is not function beacuse of those errors, now your ajax does not work therefore you need to fix those issues first. Once you fix those issues you will be able to send ajax request and update input fileds.

    To fix first problem, download the regular (compressed or not) version of jQuery and include it in your project.

    To fix second problem, download relevant datetimepicker and include in your project same like jQuery.

    After that update #rev selector to #rev_no

    $('#rev_no').val(response.rev_no);

    Also use laravel helper function instead echo json_encode(); 

    return response()->json($data);

    In your table there is no record for doc_no = 3, in your blade you're using $soplist->id

    <option value="{{ $soplist->id }}">{{ $soplist->doc_no }}</option>

    So do the same thing on controller,

    $data = sopList::where('id', $id)->first();

    Or

     $data = sopList::find($id);