Hello I'm currently developing a website using laravel And i'm trying to create this feature, dependent dropdown
So i got 2 categories The 1st category contains brand of motorcycle: Honda Yamaha Kawasaki Suzuki
And the 2nd category contains the motorcycle name from each of the motorcycle brand : Honda has : Supra X Supra X 125 Tromol
Yamaha has : JUPITER JUPITER Z
Kawasaki has : ZX CW/VR ZONE R/VR
Suzuki has : SHOGUN 125 New SHOGUN 125
The problem : when i tried to select the 1st category, like "Honda", it suddenly changed into "select motorcycle_brand) and because of that i cannot choose another value from the 1st category
How do i fix this problem?
The controller :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use App\Models\Motorcycle;
use App\Models\Kredit;
class MotorCycleController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$kredits = Kredit::all();
return view('kredit',['kredits'=>$kredits, 'layout'=>'index']);
//
}
public function motorcycle()
{
$kredits = Kredit::where('motorcycle_id','=',$id)->get();
$motorcycles = Motorcycle::where('id','=',$id)->first();
return view('motorcycle', ['kredits'=>$kredits, 'motorcycles'=>$motorcycles]);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
$kredits = Kredit::all();
$motorcycles = DB::table('motorcycles')
->groupBy('motorcycle_brand')
->get();
return view('createkredit',['kredits'=>$kredits, 'motorcycles'=>$motorcycles, 'layout'=>'create'])->with('motorcycles',$motorcycles);
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function fetch(Request $request)
{
$select = $request->get('select');
$value = $request->get('value');
$dependent = $request->get('dependent');
$data = DB::table('motorcycles')
->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;
}
public function store(Request $request)
{
$kredit = new Kredit();
$kredit->motorcycle_id = $request->input('motorcycle_id');
$kredit->kredit_name = $request->input('kredit_name');
$kredit->save();
return redirect('/kredit');
//
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
$kredit = Kredit::find($id);
$kredits = Kredit::all();
return view('kreditslist', ['kredits'=>$kredits, 'kredit'=>$kredit, 'layout'=>'show']);
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
}
The blade.php :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card mx-auto" style="width: 40rem">
<div class="card-header">
<center>Form Pengajuan Kredit Motor</center>
</div>
<div class="card-body">
<section class="col">
<form class="contact-form" action="{{url('/store')}}" method="POST">
@csrf
<div class="form-group">
<label>Nama Lengkap</label>
<input type="text" required class="form-control @error('kredit_name') is-invalid @enderror" id="kredit_name" name="kredit_name" class="form-control" autocomplete="off" value="{{old('kredit_name')}}" placeholder="Contoh : Nathanael Budiman">
</div>
@error('kredit_name')
<div class="alert alert-danger">{{ $message }}</div>
@enderror
<div class="form-group">
<label for="motorcycle_brand">Brand Motor</label>
<select name="motorcycle_brand" id="motorcycle_brand"
class="form-control input-lg dynamic" data-dependent = "motorcycle_brand">
@foreach ($motorcycles as $motorcycle)
<option value="{{$motorcycle->motorcycle_brand}}">{{$motorcycle->motorcycle_brand}}</option>
@endforeach
</select>
</div>
<br>
<div class="form-group">
<label for="motorcycle_brand">Motor Name</label>
<select name="motorcycle_name" id="motorcycle_name"
class="form-control input-lg dynamic" data-dependent = "motorcycle_name">
<option value=""></option>
</select>
</div>
<br>
<button type="submit" class="btn btn-info" id="btn_submit"
style="background-color: #ffc107; border:none; color:black">Ajukan Kredit</button>
</form>
</section>
</div>
</div>
</div>
</div>
{{csrf_field()}}
</div>
</body>
</html>
<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('motorcycle.fetch') }}",
method:"POST",
data:{select:select, value:value, _token:_token, dependent:dependent},
success:function(result){
$('#'+dependent).html(result);
}
})
}
});
});
</script>
I'm not sure to understand what you mean.
The problem : when i tried to select the 1st category, like "Honda", it suddenly changed into "select motorcycle_brand) and because of that i cannot choose another value from the 1st category
Does your first category select contain only one category after the selection ?
Please or to participate in this conversation.