I have total 4 select boxes( e.g: 1) Car Make, 2) Car Model, 3) Manufacturing Year, 4) Body Type). I am able to populate the values to the 3rd select box i.e. Year but cant get the values for the last one. These data are fetched from the database table called carlist.
For Example: Select Car Make as Audi Select Car Model as A4 Select Manufacturing Year 2009
But now in the 4th select options, I get all the Car body types as: 4WD Van Sedan Wagon Coupe
The result I want to fetch is only sedan.
I am also able to make a success call from Ajax and when I am alerting it, I am getting the required results, but I am not able to get the values in the select box.
My code:
index.blade.php
<select class="form-input select button-shadow dynamic" name="Make" id="Make" data-dependent='Model'>
@foreach($carLists as $carMake)
<option value="{{$carMake->Make}}">{{$carMake->Make}} </option>
@endforeach
</select>
</div>
<div class="form-wrap">
<select class="form-input select button-shadow dynamic" name="Model" id="Model" data-dependent='Year'>
<option value="">Select Make</option>
</select>
</div>
<div class="form-wrap">
<select class="form-input select button-shadow dynamic" name="Year" id="Year" data-dependent='Body'>
<option value="">Select Year</option>
</select>
</div>
<div class="form-wrap">
<select class="form-input select button-shadow dynamic" name="Body" id="Body">
<option value="">Select Body</option>
</select>
</div>
PagesController.php
function fetch(Request $request)
{
$select = $request->get('select');
$value = $request->get('value');
$dependent = $request->get('dependent');
$data = DB::table('carlists')
->where($select, $value)
->groupBy($dependent)
->get();
$output = '<option value="">Select '.ucfirst($dependent).'</option>';
foreach($data as $row)
{
$output .= '<option value="'.$row->$dependent.'">'.$row->$dependent.'</option>';
}
echo $output;
}
function fetchbody(Request $request)
{
$make = $request->get('make');
$model = $request->get('model');
$year = $request->get('year');
$dependent = $request->get('dependent');
$data = DB::select('Select Make, Model, Year, Body FROM carlists WHERE Make = "'.$make .'" AND Model = "'.$model .'" AND Year = "'.$year .'" GROUP by Body');
$output = '<option value="">Select '.ucfirst($dependent).'</option>';
foreach($data as $row)
{
$output .= '<option value="'.$row->$dependent.'">'.$row->$dependent.'</option>';
}
echo $output;
}
Route.php
Route::post('inc/sidebar/fetch', 'PagesController@fetch')->name('pagescontroller.fetch');
Route::post('car/make/body/fetch', 'PagesController@fetchbody')->name('bodycontroller.fetch');
javascript:
<script>
$('#Year').on('change', function(e){
var make = $('#Make').val();
var model = $('#Model').val();
var year = e.target.value;
var dependent = $(this).data('dependent');
var _token = $('input[name="_token"]').val();
$.ajax({
url:"{{ route('bodycontroller.fetch') }}",
method:"POST",
data:{make:make, model:model, year:year, _token:_token, dependent:dependent},
success:function(result)
{
$('#'+dependent).html(result);
alert('Sucess: ' + make + ' ' + model + ' ' + year + result);
}
})
});
</script>
<script>
$(document).ready(function(){
$('.dynamic').change(function(){
if($(this).val() != '')
{
var select = $(this).attr("id");
var value = $(this).val();
var dependent = $(this).data('dependent');
var _token = $('input[name="_token"]').val();
$.ajax({
url:"{{ route('pagescontroller.fetch') }}",
method:"POST",
data:{select:select, value:value, _token:_token, dependent:dependent},
success:function(result)
{
$('#'+dependent).html(result);
}
})
}
});
</script>
Not too sure how to fix this and display as options.
You can't get the value in select box because jquery onchange listener was set up before any value were appended into element, and it don't detect that option values were updated.
To do jquery onchange work as expected, you can remove event handler and add it again after populate your select box, but I don't recommend.
The better approach is use event.target to get data.
$('.dynamic').change(function(event){
const value = event.target.value
...
})