How to show data after user click an option from drop down list? - laravel

Question

I want to show the data after user have selected the project.
I've tried several method but none of them can show the next data.
I want to create as simple as when user choose a project, it'll show the next question such as select product, select period, etc.
this is my form.blade.php
#extends('layouts.master')
#section('style')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheer" 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>
<style type="text/css">
.box{
width:600px;
margin:0 auto;
border:1[x solid #ccc;]
}
</style>
#endsection
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Add Prospect</div>
<form action="{{ url('/add/outlet') }}" method="post" enctype="multipart/form-data">
#csrf
<div class="card-body">
<div class="form-group">
<select name="project_name" id="project" class="form-control input-lg dynamic" data-dependent="product">
<option value="">Select Project</option>
#foreach($project_list as $project)
<option value="{{$project->project}}"> {{$project->project}} </option>
#endforeach
</select>
</div>
<div class="form-group">
<select name="product_name" id="product" class="form-control input-lg">
<option value="">Select Product</option>
<option value="HelloBill Retail">HelloBill Retail</option>
<option value="HelloBill FNB">HelloBill FNB</option>
</select>
</div>
<div class="form-group">
<select name="period" id="period" class="form-control input-lg">
<option value="">Select Period</option>
<option value="Bulanan">Bulanan</option>
<option value="Tahunan">Tahunan</option>
</select>
</div>
<div class="form-group row">
<label for="outlet" class="col-md-4 col-form-label text-md-left">Outlet</label>
<div class="col-md-8">
<input id="outlet" type="text" class="form-control{{ $errors->has('outlet') ? ' is-invalid' : '' }}" name="outlet" value="{{ old('outlet') }}" required autofocus>
#if ($errors->has('outlet'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('outlet') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group row">
<label for="alamat" class="col-md-4 col-form-label text-md-left">Alamat</label>
<div class="col-md-8">
<input id="addressLine1" type="text" class="form-control{{ $errors->has('addressLine1') ? ' is-invalid' : '' }}" name="addressLine1" value="{{ old('addressLine1') }}" placeholder="Address Line #1" required autofocus>
#if ($errors->has('addressLine1'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('addressLine1') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-left"></label>
<div class="col-md-8">
<input id="addressLine2" type="text" class="form-control" name="addressLine2" value="{{ old('addressLine2') }}" placeholder="Address Line #2" required autofocus>
</div>
</div>
<div class="form-group row">
<label for="kelurahan" class="col-md-4 col-form-label text-md-left"></label>
<div class="col-md-8">
<input id="kelurahan" type="text" class="form-control{{ $errors->has('kelurahan') ? ' is-invalid' : '' }}" name="kelurahan" value="{{ old('kelurahan') }}" placeholder="Kelurahan" required autofocus>
#if ($errors->has('kelurahan'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('kelurahan') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group row">
<label for="kecamatan" class="col-md-4 col-form-label text-md-left"></label>
<div class="col-md-8">
<input id="kecamatan" type="text" class="form-control{{ $errors->has('kecamatan') ? ' is-invalid' : '' }}" name="kecamatan" value="{{ old('kecamatan') }}" placeholder="Kecamatan" required autofocus>
#if ($errors->has('kecamatan'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('kecamatan') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group row">
<label for="kota" class="col-md-4 col-form-label text-md-left"></label>
<div class="col-md-8">
<input id="kota" type="text" class="form-control{{ $errors->has('kota') ? ' is-invalid' : '' }}" name="kota" value="{{ old('kota') }}" placeholder="Kota" required autofocus>
#if ($errors->has('kota'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('kota') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group row">
<label for="provinsi" class="col-md-4 col-form-label text-md-left"></label>
<div class="col-md-8">
<input id="provinsi" type="text" class="form-control{{ $errors->has('provinsi') ? ' is-invalid' : '' }}" name="provinsi" value="{{ old('provinsi') }}" placeholder="Provinsi" required autofocus>
#if ($errors->has('provinsi'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('provinsi') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group row">
<label for="zipCode" class="col-md-4 col-form-label text-md-left"></label>
<div class="col-md-8">
<input id="zipCode" type="text" class="form-control{{ $errors->has('zipCode') ? ' is-invalid' : '' }}" name="zipCode" value="{{ old('zipCode') }}" placeholder="Kode Pos" required autofocus>
#if ($errors->has('zipCode'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('zipCode') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group row">
<label for="PIC" class="col-md-4 col-form-label text-md-left">PIC</label>
<div class="col-md-8">
<input id="PIC" type="text" class="form-control{{ $errors->has('PIC') ? ' is-invalid' : '' }}" name="PIC" value="{{ old('PIC') }}" required autofocus>
#if ($errors->has('PIC'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('PIC') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-left">Email</label>
<div class="col-md-8">
<input id="email" type="text" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required autofocus>
#if ($errors->has('email'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
Add
</button>
</div>
</div>
#if($errors->any())
<div class="category-msg-error">{{ $errors->first() }}</div>
#endif
</div>
</form>
</div>
</div>
</div>
</div>
#endsection
#section('extra')
<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('dynamicdependent.fetch')}}",
method:"POST",
data:{select:select, value:value, _token:_token,
dependent=dependent},
success:function(result){
$('#+dependent').html(result);
}
})
}
});
});
</script>
#endsection
please help. and i am also new in Laravel

Answer 1

There are two mistakes:-
In ajax request data you are setting dependent=dependent that should be dependent: dependent.
In Success response, you are setting this $('#+dependent').html(result); but that is not correct. It should be this $('#'+dependent).html(result);
Below is the full jQuery code:
<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('dynamicdependent.fetch')}}",
method:"POST",
data:{
select:select,
value:value,
_token:_token,
dependent:dependent
},
success:function(result){
$('#'+dependent).html(result);
}
});
}
});
});
</script>
Please check and let me know if that will not help. I will try to solve your problem.