Chainging Select Boxes (Country, State, City) - javascript

We have 3 select option, Country, State, City.
I have a php page where I would like to select a location from a list of countries, states, and cities. The page contains other data for user signup (name, email, etc) so I don't want to refresh the page or anything when the select boxes refresh. Currently, each of the select boxes just load the full list of countries, states, or cities. I want them to be chained so I don't have duplicate city names (same name in different states or countries).
I want to when select America, List of cities New York bring me.
<div class="col-md-2">
<div class="form-group">
<label for="country_id">Country</label>
<select id="country_id" name="country_id" class="form-control">
<option></option>
#foreach($countries as $country)
<option {{ optional(auth()->user()->country)->id == $country->id ? 'selected' : '' }} value="{{ $country->id }}">
{{ $country->name }}
</option>
#endforeach
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="state_id">State</label>
<select id="state_id" name="state_id" class="form-control">
</select>
<input type="text" name="state_name" value="{{ auth()->user()->state_name }}" id="state_id" class="form-control d-none">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="city_id">City</label>
<select id="city_id" name="city_id" class="form-control">
</select>
<input type="text" name="city_name" value="{{ auth()->user()->city_name }}" id="city_id" class="form-control d-none">
</div>
</div>
js
$(document).on('change', '#country_id', function() {
let country_id = $(this).val();
if(country_id == 1){
$('#city_id').find('#state_id');
}
let select = $('#state_id');
$.ajax({
type: 'get',
url: '{{ route('findIDCoubtry') }}',
data: {'id':country_id},
success: function(data){
select.html('');
for (var i = 0; i < data.length; i++){
select.append('<option value="'+data[i].id+'">'+data[i].name+'</option>');
}
},
error: function(){
console.log('this is a error');
},
});
}).trigger('change');

Related

Looping Item, with autofill object using Javascript or Jquery

Trying to make the item to be auto fill when select the item. But the item is in looping with will result using the same id if jQuery, so what is the best method for me? like in the image where user pick the item, then the data will be autofill
$countItem = 0;
foreach($SopProcess AS $process)
{
$countItem++;
if($process["item_proc_det"]== 2){
echo '<div class="col-md-6 col-12">
<div class="mb-1">
<label class="form-label" >Activity:</label>
<input type="input" class="form-control" value="'.$process["name_process"].' '. $process["item_proc_num"].'" readonly/>
<input type="hidden" id="postcode" class="form-control" value="'.$process["item_proc_num"].'" readonly/>
</div>
</div>
<div class="col-md-6 col-12">
<div class="mb-1">
<label class="form-label" >Substance Use</label>
<fieldset>
<div class="input-group">
<select class="form-select" id="substance'.$countItem.'" name="item_media[]" required>
<option value="">Please Select</option>';
foreach($treat as $item_media){
$id = $item_media['media_treat_id'];
$name = $item_media['media_treat_brand'];
echo "<option value='$id'>$name</option>";
}
echo'
</select>
<input type="nu" id="valueitem'.$countItem.'" class="form-control" placeholder="Input amount use" aria-label="Amount" />
<select class="form-select" id="basicSelect" id="unititem'.$countItem.'" name="item_media[]" required>
<option value="">Select Unit</option>';
echo "
<option value='3'>ml</option>
<option value='2'>g</option>
<option value='7'>Unit</option>";
echo'
</select>
</div>
</fieldset>
</div>
</div>
';
}}
For Javascript
$$('#substance').on('change', function(){
var activityID = $('#substance').val();
if(itemId){
$.ajax({type:'POST',
url:'?syspath=ajax&controller=ajax&action=generateItemValue',
data: { 'activitiyNum': itemNumID, 'sraID': sraID, 'seasonID':seasonID,'DetAct': actID },
success:function(html){
$('#valueitem').html(html);
$('#unititem').html(html);
}
});
}else{
('#itemName').html('<option value="">Select Activity number first</option>');
}
})
I am expecting, the data on the valueitem and unititem will be filled based on the item that were select by the user, but I think am using the wrong way as ID must be unique. I need some help a proper way to use the js or query in which the data will be auto fill even the object are in looping

Select OnChange Javascript on Laravel

I want to make it so that when I click on one of the dropdowns, the value according to the record id in the related table immediately appears.
I want to make it so that when I click on one of the dropdowns, the value according to the record id in the related table immediately appears.
when "golongan" is selected then the value of "gaji pokok" automatically appears.
when "asisten ahli" is selected then the value of "tunjangan fungsional" automatically appears.
when "pembantu ketua | asisten ahli" is selected then the value of "tunjangan struktural" automatically appears.
<div class="modal fade" id="tambahgajiModal" tabindex="-1" role="dialog" aria-labelledby="tambahgajiModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="tambahfungsiModal">Tambah Gaji Karyawan</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="/gaji/insert" method="POST" enctype="multipart/form-data">
#csrf
<div class="content">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<select name="nama" type="text" class="form-control select2 #error('nama') is-invalid #enderror" value="{{ old('nama') }}">
<option>-- Nama Karyawan --</option>
#foreach ($karyawan as $data)
<option value="{{ $data->nama }}">{{ $data->nama }}</option>
#endforeach
</select>
<div class="invalid-feedback">
#error('nama')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<select name="gol" type="text" class="form-control select2 #error('gol') is-invalid #enderror" onchange="getddl()" value="{{ old('gol') }}">
<option>-- Golongan dan M K G --</option>
#foreach ($golongan as $data)
<option value="{{ $data->gol }} | {{ $data->mkg }}">{{ $data->gol }} | {{ $data->mkg }}</option>
#endforeach
</select>
<div class="invalid-feedback">
#error('gol')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="tunjangan_gol" type="text" placeholder="Gaji Pokok" class="form-control #error('tunjangan_gol') is-invalid #enderror" value="{{ old('tunjangan_gol') }}" id="gol">
<div class="invalid-feedback">
#error('tunjangan_gol')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<select name="jbt_fungsi" type="text" class="form-control select2 #error('jbt_fungsi') is-invalid #enderror" value="{{ old('jbt_fungsi') }}">
<option>-- Jabatan Fungsional --</option>
#foreach ($fungsi as $data)
<option value="{{ $data->jbt_fungsi }}">{{ $data->jbt_fungsi }}</option>
#endforeach
</select>
<div class="invalid-feedback">
#error('gol')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="tunjangan_fungsi" type="text" placeholder="Tunjangan Fungsional" class="form-control #error('tunjangan_fungsi') is-invalid #enderror" value="{{ old('tunjangan_fungsi') }}">
<div class="invalid-feedback">
#error('tunjangan_fungsi')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<select name="jbt_struktur" type="text" class="form-control select2 #error('jbt_struktur') is-invalid #enderror" value="{{ old('jbt_struktur') }}">
<option>-- Jabatan Struktural & Fungsional --</option>
#foreach ($struktur as $data)
<option value="{{ $data->jbt_struktur }} | {{ $data->jbt_fungsi }}">{{ $data->jbt_struktur }} | {{ $data->jbt_fungsi }}</option>
#endforeach
</select>
<div class="invalid-feedback">
#error('jbt_struktur')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="tunjangan_struktur" type="text" placeholder="Tunjangan Struktural" class="form-control #error('tunjangan_struktur') is-invalid #enderror" value="{{ old('tunjangan_struktur') }}">
<div class="invalid-feedback">
#error('tunjangan_struktur')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="total_gaji" type="text" placeholder="Total Gaji" class="form-control #error('total_gaji') is-invalid #enderror" value="{{ old('total_gaji') }}">
<div class="invalid-feedback">
#error('total_gaji')
{{ $message }}
#enderror
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
how to package it with Javascript onChange in laravel ?
Sorry, I couldn't understand your language well, but you can do something like this with jquery
<div class="form-group mb-3">
<select id="country-dropdown" class="form-control">
<option value="">-- Select Country --</option>
#foreach ($countries as $data)
<option value="{{$data->id}}">
{{$data->name}}
</option>
#endforeach
</select>
</div>
<div class="form-group mb-3">
<select id="state-dropdown" class="form-control">
</select>
</div>
<div class="form-group">
<select id="city-dropdown" class="form-control">
</select>
</div>
you can leave the dependent dropdown empty, then get those depentdent dropdown through ajax like these:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
/*------------------------------------------
--------------------------------------------
Country Dropdown Change Event
--------------------------------------------
--------------------------------------------*/
$('#country-dropdown').on('change', function () {
var idCountry = this.value;
$("#state-dropdown").html('');
$.ajax({
url: "{{url('api/fetch-states')}}",
type: "POST",
data: {
country_id: idCountry,
_token: '{{csrf_token()}}'
},
dataType: 'json',
success: function (result) {
$('#state-dropdown').html('<option value="">-- Select State --</option>');
$.each(result.states, function (key, value) {
$("#state-dropdown").append('<option value="' + value
.id + '">' + value.name + '</option>');
});
$('#city-dropdown').html('<option value="">-- Select City --</option>');
}
});
});
/*------------------------------------------
--------------------------------------------
State Dropdown Change Event
--------------------------------------------
--------------------------------------------*/
$('#state-dropdown').on('change', function () {
var idState = this.value;
$("#city-dropdown").html('');
$.ajax({
url: "{{url('api/fetch-cities')}}",
type: "POST",
data: {
state_id: idState,
_token: '{{csrf_token()}}'
},
dataType: 'json',
success: function (res) {
$('#city-dropdown').html('<option value="">-- Select City --</option>');
$.each(res.cities, function (key, value) {
$("#city-dropdown").append('<option value="' + value
.id + '">' + value.name + '</option>');
});
}
});
});
});
</script>
and declare the routes that you will call in url in ajax
Route::post('etch-states', [DropdownController::class,
'fetchState']);
Route::post('fetch-cities', [DropdownController::class, 'fetchCity']);
In the controller do something like this:
public function fetchState(Request $request)
{
$data['states'] = State::where("country_id", $request->country_id)
->get(["name", "id"]);
return response()->json($data);
}
/**
* Write code on Method
*
* #return response()
*/
public function fetchCity(Request $request)
{
$data['cities'] = City::where("state_id", $request->state_id)
->get(["name", "id"]);
return response()->json($data);
}

How to preserve all the filters in the form after reloading the view in Laravel 5.4?

I have the following form in the view:
<form class="form-inline" method="POST" action="{{route('dsp.report')}}">
#csrf <!-- {{ csrf_field() }} -->
<div class="col-sm-2 form-group">
<label>Range one: </label><input type="text" class="form-control" id="date_from" name="date_from" placeholder="Date from range">
</div>
<div class="col-sm-2 form-group">
<label>Range two: </label><input type="text" class="form-control" id="date_to" name="date_to" placeholder="Date to range">
</div>
<div class="col-sm-2 form-group">
<label>Filter by SSP: </label><select name="ssp_id[]" id="ssp" class="form-control-lg select2" multiple="multiple"></select>
</div>
<div class="col-sm-2 form-group">
<label>Filter by DSP: </label><select name="dsp_id[]" id="dsp" class="form-control-lg select2" multiple="multiple"></select>
</div>
<div class="col-sm-2 form-group">
<label>Group by: </label>
<select class="form-control" name="groupby">
<option>SSP/DSP</option>
<option>SSP</option>
<option>DSP</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I want to preserve all the values in this form after controller processed the request and returned data back:
return view('dsp.index', $data);
How can I do it? Is there any simple solution?
UPD: To make it clear for preserving values (not keys) in select2-based multiple dropdown ajax selects:
First of all, we trigger this controller when we're looking for the SSP term:
public function get_ssp(Request $request) {
$term = $request->get('term');
$ssp_list = SspCompanyList::where('ssp_company_name', 'LIKE', '%'. $term['term'] .'%')
->get(['ssp_company_id as id', 'ssp_company_name as text']);
return ['results' => $ssp_list];
}
And then we process chosen ids in the controller after submitting. Select2 has been configured in this way:
$(document).ready(function() {
$('#ssp').select2({
width: '200px',
minimumInputLength: 3,
ajax: {
url: '{{ route("get_ssp") }}',
dataType: 'json',
type: "POST",
quietMillis: 50,
data: function (term) {
return {
term: term
};
},
},
});
});
but the problem is that select2 sends only ids in ssp_id[], not key-value items, and it's not possible to recover them from old() function as item names before sending.
UPD2:
I'm trying to solve it in this way:
<select name="ssp_id[]" id="ssp" class="form-control-lg select2" multiple="multiple">
#if (is_array(old('ssp_id')))
#foreach (old('ssp_id') as $ssp_id)
{{ $ssp_name = \App\Models\SspCompanyList::select('ssp_company_name')->where('ssp_company_id', $ssp_id)->first()->ssp_company_name }}
<option value="{{ $ssp_name }}" selected="selected">{{ $ssp_name }}</option>
#endforeach
#endif
</select>
and after first reload it works and preserves the ssp names I need, but after second attempt to select values for dsp below on the same page and submit again it returns this error:
Trying to get property 'ssp_company_name' of non-object (View:
/home/pavel/projects/dsp/resources/views/dsp/index.blade.php)
So, why first time it's working and second time - not? Should we treat it in the other manner for select2?
NOTE:
You forgot to add the value attribute on your select options
For the normal Input Fields, you can pass the old value to it by using Laravel's old('input_name')
For Example:
<input name="input_name" value="{{ old('input_name') }}" />
While your Select Fields need the selected attribute on each option tag.
For example:
<select class="form-control" name="input_name">
<option {{ old('input_name') == "SSP/DSP" ? 'selected' : '' }} value="SSP/DSP">SSP/DSP</option>
<option {{ old('input_name') == "SSP" ? 'selected' : '' }} value="SSP">SSP</option>
<option {{ old('input_name') == "DSP" ? 'selected' : '' }} value="DSP">DSP</option>
</select>
Your code becomes:
<form class="form-inline" method="POST" action="{{route('dsp.report')}}">
#csrf <!-- {{ csrf_field() }} -->
<div class="col-sm-2 form-group">
<label>Range one: </label>
<input type="text" class="form-control" id="date_from" name="date_from" value="{{ old('date_from') }}" placeholder="Date from range">
</div>
<div class="col-sm-2 form-group">
<label>Range two: </label>
<input type="text" class="form-control" id="date_to" name="date_to" value="{{ old('date_to') }}" placeholder="Date to range">
</div>
<div class="col-sm-2 form-group">
<label>Filter by SSP: </label>
<select name="ssp_id[]" id="ssp" class="form-control-lg select2" multiple="multiple"><option></option></select>
</div>
<div class="col-sm-2 form-group">
<label>Filter by DSP: </label>
<select name="dsp_id[]" id="dsp" class="form-control-lg select2" multiple="multiple"><option></option></select>
</div>
<div class="col-sm-2 form-group">
<label>Group by: </label>
<select class="form-control" name="groupby">
<option {{ old('groupby') == "SSP/DSP" ? 'selected' : '' }} value="SSP/DSP">SSP/DSP</option>
<option {{ old('groupby') == "SSP" ? 'selected' : '' }} value="SSP">SSP</option>
<option {{ old('groupby') == "DSP" ? 'selected' : '' }} value="DSP">DSP</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
You can add your select2 selected values this way:
let arrayOfSelectedValues = [] // You can keep your selected values here if you know them already
$('#ssp').select2({
width: '200px',
minimumInputLength: 3,
ajax: {
url: '{{ route("ssp") }}',
dataType: 'json',
type: "POST",
quietMillis: 50,
data: function (term) {
return {
term: term
};
},
},
}).val(arrayOfSelectedValues).trigger("change"); // Then add the selected values to the select2() initialisation
Add the property value to all inputs like this:
<input type="text" name="username" value="{{ old('username') }}">
Check the docs for better understanding https://laravel.com/docs/5.4/requests#old-input

Based on selection how can I move to another page in vue js html?

This is my html code(1st TRY)
<div class="col-md-4" >
<div class="form-group label-floating">
<label class="control-label">Select No</label>
<select class="form-control" v-model="or" required="">
<option value="" selected disabled hidden>Choose Type here</option>
<option v-for="aon in data" v-bind:href="'/recorddetails/'+aon.docId" >{{aon.orno}}</option>
</select>
</div>
</div>
So, based on the dropdown, If I select a particular value, I need to move to the recorddetails page with its docId.
When I try this code it is not working.
I also tried the following code(2nd TRY)
<div class="col-md-4" >
<div class="form-group label-floating">
<label class="control-label">Select No</label>
<select class="form-control" v-model="or" required="" #change="orCost()">
<option value="" selected disabled hidden>Choose Type here</option>
<option v-for="aon in data" v-bind:href="'/recorddetails/'+aon.docId" >{{aon.orno}}</option>
</select>
</div>
</div>
My vue js code is
methods:{
orCost: function(e) {
var vm = this;
data = {};
data['or'] = this.or;
$.ajax({
url: '/recorddetails/'+this.or,
data: data,
type: "GET",
dataType: 'json',
success: function(e) {
if (e.status)
{
}
else {
}
}
});
return false;
},
},
The problem is I am not able to redirect to the recorddetails page.
Please help me to redirect to the recorddetails page. I am able to get the docId value and all in the orCost(), but they are not redirecting. Please help me to redirect
You are trying too complicated I guess. Just try this
I have included a form also added a name as no.
<form method="post" action="/recorddetails/" name="myform" class=" form-inline" >
<div class="col-md-4" >
<div class="form-group label-floating">
<label class="control-label">Select Or No</label>
<select class="form-control" name="no" v-model="or" required="" >
<option value="" selected disabled hidden>Choose Type here</option>
<option v-for="aon in data" v-bind:value="aon.docId" >{{aon.orno}}</option>
</select>
</div>
</div>
<button class="btn search-btn" type="submit"><i class="fa fa-search"></i></button>
</form>

Keep select option value selected during edit in laravel

I am trying to keep select option value selected during the edit. There I used javascript for the dynamic dependent dropdown list. But now I am facing a problem to keep option value selected during the edit. Would someone help me please to solve this problem? edit.blade.php -
<form class="form-material form-horizontal" action="{{ route('admin.commercial.orders.update', $order->id) }}" method="POST">
#method('PUT')
#csrf
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-md-12" for="name">Buyer Name: </label>
<div class="col-md-12">
<select class="form-control select2" name="name" id="buyerName">
<option value="">Select Buyer</option>
</select>
#if ($errors->has('name'))
<small class="error">{{ $errors->first('name') }}</small>
#endif
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-md-12" for="job_name">Job Name/Title: </label>
<div class="col-md-12">
<select class="form-control select2" name="job_name" id="jobName">
<option value="">Select Job</option>
</select>
#if ($errors->has('job_name'))
<small class="error">{{ $errors->first('job_name') }}</small>
#endif
</div>
</div>
</div>
</div>
</form>
And javascript for dependant dropdown-
<script type="text/javascript">
$(function () {
$(".select2").select2();
});
/** Dependent Dropdowns**/
$(function() {
dynamicDropdown('/admin/commercial/get-buyers', '#buyerName');
$('#buyerName').change(function() {
let url = `/admin/commercial/get-buyer-jobs/${this.value}`;
let target = '#jobName';
dynamicDropdown(url, target);
});
});
function dynamicDropdown(url, selector) {
$.get(url, function (data) {
let $select = $(selector);
$select.find('option').not(':first').remove();
let options = [];
$.each(data, function(index, item) {
options.push(`<option value="${item.id}">${item.name}</option>`);
})
$select.append(options);
});
}
</script>
My edit function is -
public function edit($id)
{
$order = BuyerOrder::find($id);
return view('admin.marchendaising.commercials.orders.edit', compact('order'));
}
Add this to the bottom of your javascript;
$("#buyerName").val("{{old('name')}}");
$("#jobName").val("{{old('job_name')}}");`
You may try this idea:
<select name="buyer">
#foreach(['buyer1', 'buyer2', 'buyer3'] as $buyer)
<option vlaue="{{ $buyer }}"{{ (old('buyer') == $buyer) ? ' selected' : '' }}>{{ $buyer }}</option>
#endforeach
</select>
OR
<select name="buyer">
#foreach(['buyer1', 'buyer2', 'buyer3'] as $buyer)
<option vlaue="{{ $buyer }}"{{ ($order->buyer == $buyer) ? ' selected' : '' }}>{{ $buyer }}</option>
#endforeach
</select>

Categories