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

Question

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

Answer 1

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);

Answer 2

You gave a wrong id to response, also you should give an id to title input.
<input type="text" class="form-control" name="title" id="title">
<script>
$(document).ready(function(){
$(document).on('change','#docNo',function(){
var id = $(this).val();
var url = '{{ route("getDetails", ":id") }}';
url = url.replace(':id', id);
$.ajax({
type: 'get',
url: url,
dataType: 'json',
success: function(response) {
$('#rev_no').val(response.rev_no);
$('#title').val(response.title);
}
});
});
});
</script>