I'm making a Laravel 5.4 application where users has to select a school and class, when registering their account. I want some JavaScript (JQuery) to change the classes selection option values after which school the user selects.
Which means that $class->school_id has to be equal to the id of the selected school, for the class to show up as an option.
My view:
<select name="school_id" class="form-control" required>
<option value="" disabled selected>Pick your school</option>
#foreach ($schools as $school)
<option value="{{ $school->id }}" required>{{ $school-> name}}</option>
#endforeach
</select>
<select name="my_class" class="form-control">
<option value="" disabled selected>Pick your class</option>
#foreach($classes as $class)
<option value="{{$class->id}}">{{$class->name}}</option>
#endforeach
</select>
you should add an ajax technology for this ..
FORM
<select name="school_id" id="school_id" class="form-control" required>
<option value="" disabled selected>Pick your school</option>
#foreach ($schools as $school)
<option value="{{ $school->id }}" required>{{ $school-> name}}</option>
#endforeach
</select>
<select name="my_class" id="my_class" class="form-control"></select>
JS
$(document).on('change','#school_id',function(){
var school_id = $(this).val();
$.ajax({
url: "/getSchoolClass",
data: {school_id: school_id},
dataType: ,
success: function(response){
var newOptions = '<option value="" disabled selected>Pick your class</option>';
$( response.data ).each(function( index ) {
newOptions += '<options value="' + $(this).id + '">' + $(this).name + '</option>';
});
$('#my_class').html(newOptions);
}
});
});
ROUTE
Route::post('/getSchoolClass','SomeController#someFunction');
CONTROLLER
function someFuntion(Request $request)
{
$data = SchoolClass::where('school_id','=',$request->school_id)->get();
return $data;
}
Related
I'd like to concatenate several values from selects and input fields on a final input field that contain all the values.
What I have until now is this:
$('#chosen_a').change(function() {
$('#ddlNames').val($('#chosen_a option:selected').data('id'));
console.log($('#chosen_a option:selected').data('id'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="criteria_title" id="chosen_a" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: block;">
<option value="" disabled="" selected="">- First select -</option>
<option value="AAA" data-id="AAA">AAA</option>
<option value="BBB" data-id="BBB">BBB</option>
<option value="CCC" data-id="CCC">CCC</option>
<option value="DDD" data-id="DDD">DDD</option>
<option value="EEE" data-id="EEE">EEE</option>
</select>
<input id="Something1" placeholder="Write something"></input><br/>
<select name="criteria_title" id="chosen_b" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: block;">
<option value="" disabled="" selected="">- Second select -</option>
<option value="FFF" data-id="FFF">FFF</option>
<option value="GGG" data-id="GGG">GGG</option>
<option value="HHH" data-id="HHH">HHH</option>
<option value="III" data-id="III">III</option>
<option value="JJJ" data-id="JJJ">JJJ</option>
</select>
<input id="Something2" placeholder="Write something else"></input><br/>
<br><br>
<input maxlength="2600" name="ddlNames" id="ddlNames" onKeyUp="countChar(this)" placeholder="Blocco Note"></input><br/>
In effect, I can get the first select option to the input field, but I do not know how to add the rest.
If I understand you well ...
Add a class 'getValues' to all inputs & selects that you want to get the values and create an event on JQuery onChange so when something will change it will auto-join it in that #ddlNames input.
$('.getValues').change(function() {
var values = [];
$('.getValues').each(function() {
values.push($(this).val());
});
$('#ddlNames').val(values.join(', '));
})
Try this:
const onChange = () => {
const value = $('#chosen_a option:selected').val() + ' '
+ $('#Something1').val() + ' '
+ $('#chosen_b option:selected').val() + ' '
+ $('#Something2').val();
$('#ddlNames').val(value);
}
$('select').change(onChange);
$('input').keydown(onChange);
I have an error when I want to do dynamic dropdown using Ajax and jQuery.
The problem is when I choose a Province A, it's retrieving City that belongs to Province A, but when I choose Province B, it's still retrieving City from Province A too, the same thing happened when I choose Province B,C,D etc.. it's still retrieving City from Province A which is in this DB, province A was the first row from province table.
Here is my screenshot:
Here's my HTML markup:
<div class="form-group">
<label class="font-weight-bold">PROVINSI ASAL</label>
<select class="form-control provinsi-asal" name="province_origin">
<option value="0">-- pilih provinsi asal --</option>
#foreach ($provinces as $province => $value)
<option value="{{ $province }}">{{ $value }}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label class="font-weight-bold">KOTA / KABUPATEN ASAL</label>
<select class="form-control kota-asal" name="city_origin">
<option value="">-- pilih kota asal --</option>
</select>
</div>
Here my ajax code:
$('select[name="province_origin"]').on('change', function() {
let provinceId = $(this).val();
if (provinceId) {
jQuery.ajax({
url: 'transaction/cities/'+ rovinceId,
type: "GET",
dataType: "json",
success: function(response) {
$('select[name="city_origin"]').empty();
$('select[name="city_origin"]').append(
'<option value="">-- pilih kota asal --</option>');
$.each(response, function(key, value) {
$('select[name="city_origin"]').append(
'<option value="'+ key +'">' + value +
'</option>');
});
},
});
} else {
$('select[name="city_origin"]').append(
'<option value="">-- pilih kota asal --</option>');
}
FUnction in controller to get the province,cities
public function getCities($id)
{
$city = City::where('province_id', $id)->pluck('name', 'city_id');
return response()->json($city);
}
I have this form where I want to hide specific parts of it based on the subsubcategory_id selected but I can't seem to make it work.
I have a script that changes subcategory based on category selected and another one that changes subsubcategory based on subcategory selected.
The script for hiding parts of the form works but only for category that comes from the DB and not for subsubcategory that is affected by the first script. The value of the option element in the select just seems to register as empty for the 2nd script. What should I do to fix it?
<script type="text/javascript">
$(document).ready(function() {
$('select[name="category_id"]').on('change', function() {
var category_id = $(this).val();
if (category_id) {
$.ajax({
url: "{{ url('/category/subcategory/subsubcategory') }}/" + category_id,
type: "GET",
dataType: "json",
success: function(data) {
$('select[name="subsubcategory_id"]').html('');
var d = $('select[name="subcategory_id"]').empty();
$.each(data, function(key, value) {
$('select[name="subcategory_id"]').append(
'<option value="' + value.id + '">' + value
.subcategory_name + '</option>');
});
},
});
} else {
alert('danger');
}
});
$('select[name="subcategory_id"]').on('change', function() {
var subcategory_id = $(this).val();
if (subcategory_id) {
$.ajax({
url: "{{ url('/category/subcategory/subsubcategory/product') }}/" +
subcategory_id,
type: "GET",
dataType: "json",
success: function(data) {
var d = $('select[name="subsubcategory_id"]').empty();
$.each(data, function(key, value) {
$('select[name="subsubcategory_id"]').append(
'<option value="' + value.id + '">' + value
.subsubcategory_name + '</option>');
});
},
});
} else {
alert('danger');
}
});
});
</script>
// script to hide parts of the form
<script>
$(document).ready(function() {
$('#fieldLaptop').hide();
$('#fieldTablet').hide();
$('#fieldPhone').hide();
$("#test").change(function() {
var subsubcategory_id = $(this).val();
if (subsubcategory_id == 1) {
$('#fieldLaptop').show();
$('#fieldTablet').hide();
$('#fieldPhone').hide();
} else if (subsubcategory_id == 2) {
$('#fieldLaptop').hide();
$('#fieldTablet').show();
$('#fieldPhone').hide();
} else if (subsubcategory_id == 3) {
$('#fieldLaptop').hide();
$('#fieldTablet').hide();
$('#fieldPhone').show();
} else {
$('#fieldLaptop').hide();
$('#fieldTablet').hide();
$('#fieldPhone').hide();
}
});
});
$("#test").trigger("change");
</script>
<form method="post" action="{{ route('product-store') }}" enctype="multipart/form-data">
#csrf
<div class="row mbn-20">
<div class="col-3 mb-20">
<label for="formLayoutUsername3">Brand</label>
<select name="brand_id" class="form-control">
<option value="" selected="" disabled="">Brand</option>
<option value="{{ $brand->id }}">
{{ $brand->brand_name }}
</option>
#endforeach
</select>
#error('brand_id')
<span class="text-danger"><strong>{{ $message }}</strong></span>
#enderror
</select>
</div>
<div class="col-3 mb-20">
<label for="formLayoutEmail3">Categorie</label>
<select name="category_id" class="form-control">
<option value="" selected="" disabled="">Category
</option>
<option value="{{ $category->id }}">
{{ $category->category_name }}
</option>
#endforeach
</select>
#error('category_id')
<span class="text-danger"><strong>{{ $message }}</strong></span>
#enderror
</div>
<div class="col-3 mb-20">
<label for="formLayoutPassword3">SubCategory</label>
<select name="subcategory_id" class="form-control">
<option value="" selected="" disabled="">Select SubCategory
</option>
</select>
#error('subcategory_id')
<span class="text-danger"><strong>{{ $message }}</strong></span>
#enderror
</div>
<div class="col-3 mb-20">
<label for="formLayoutAddress1">SubSubCategory</label>
<select name="subsubcategory_id" class="form-control" id="test">
<option value="" selected="" disabled="">Select SubSubCategory
</option>
</select>
#error('subsubcategory_id')
<span class="text-danger"><strong>{{ $message }}</strong></span>
#enderror
</div>
</form>
Based on your explanation, I think you're looking for this:
$(document).on('change', '[data-child]', function() {
const selected_group = $(this).val();
let el = $(`#${$(this).attr("id")}`);
if (selected_group === null) {
el.hide();
} else {
el.show();
}
let child_select = $("#" + $(this).attr("data-child"));
value = child_select.find("option").hide().filter(function(i, e) {
return $(e).val().startsWith(selected_group);
}).show().eq(0).val();
child_select.val(value);
child_select.trigger("change");
});
$("[data-child]").eq(0).trigger("change");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row m-4 justify-content-center">
<div class="col-3">
<span>Operating system</span>
<select data-child="niv1" class="selectdata form-control custom-select">
<option value="1-1">Android</option>
<option value="1-2">Linux</option>
<option value="1-3" selected>Windows</option>
</select>
</div>
<div class="col-3">
<span>System version</span>
<select id="niv1" data-child="niv2" class="selectdata form-control custom-select">
<option data-group="1-1" value="1-1-1">9.0 Pie</option>
<option data-group="1-2" value="1-2-1">Ubuntu</option>
<option data-group="1-3" value="1-3-1">Windows 7</option>
<option data-group="1-3" value="1-3-2">Windows 8</option>
<option data-group="1-3" value="1-3-3">Windows 10</option>
</select>
</div>
<div class="col-3">
<span>Edition</span>
<select id="niv2" data-child="niv3" class="selectdata form-control custom-select">
<option data-group="1-2-1" value="1-2-1-1">Trusty Tahr</option>
<option data-group="1-2-1" value="1-2-1-2">Xenial Xerus</option>
<option data-group="1-2-1" value="1-2-1-3">Bionic Beaver</option>
<option data-group="1-3-1" value="1-3-1-1">Windows 7 Home</option>
<option data-group="1-3-1" value="1-3-1-2">Windows 7 Pro</option>
<option data-group="1-3-2" value="1-3-2-1">Windows 8 Home</option>
<option data-group="1-3-2" value="1-3-2-2">Windows 8 Pro</option>
<option data-group="1-3-3" value="1-3-3-1">Windows 10 Home</option>
<option data-group="1-3-3" value="1-3-3-2">Windows 10 Pro</option>
</select>
</div>
<div class="col-3">
<span>Build</span>
<select id="niv3" data-child="niv4" class="selectdata form-control custom-select">
<option data-group="1-2-1-2" value="1-2-1-2-1">18.04 LTS</option>
<option data-group="1-3-1-1" value="1-3-1-1-1">Win 7 Home - A</option>
<option data-group="1-3-1-1" value="1-3-1-1-2">Win 7 Home - B</option>
<option data-group="1-3-1-2" value="1-3-1-2-1">Win 7 Pro - A</option>
<option data-group="1-3-1-2" value="1-3-1-2-2">Win 7 Pro - B</option>
<option data-group="1-3-2-1" value="1-3-2-1-1">Win 8 Home - A</option>
<option data-group="1-3-2-1" value="1-3-2-1-2">Win 8 Home - B</option>
<option data-group="1-3-2-2" value="1-3-2-2-1">Win 8 Pro - A</option>
<option data-group="1-3-2-2" value="1-3-2-2-2">Win 8 Pro - B</option>
<option data-group="1-3-3-1" value="1-3-3-1-1">Win 10 Home - A</option>
<option data-group="1-3-3-1" value="1-3-3-1-2">Win 1 Home - B</option>
<option data-group="1-3-3-2" value="1-3-3-2-1">Win 10 Pro - A</option>
<option data-group="1-3-3-2" value="1-3-3-2-2">Win 10 Pro - B</option>
</select>
</div>
</div>
So this is the way to make it work. If there is only one option You should probably trigger it manually after putting stuff in it so it runs with the first chosen option
The change is only called when the user changes it, and not after the AJAX runs. So in your case, you probably always want to call change to make sure your UI is in sync with what came from the server initially
$('select[name="subcategory_id"]').on('change', function() {
var subcategory_id = $(this).val();
if (subcategory_id) {
$.ajax({
url: "{{ url('/category/subcategory/subsubcategory/product') }}/" +
subcategory_id,
type: "GET",
dataType: "json",
success: function(data) {
var d = $('select[name="subsubcategory_id"]').empty();
$.each(data, function(key, value) {
$('select[name="subsubcategory_id"]').append(
'<option value="' + value.id + '">' + value
.subsubcategory_name + '</option>');
});
// the tigger is set here for one option in the select !!!
$("#test").trigger("change");
},
});
} else {
alert('danger');
}
});
Then if there are multiple options the user will trigger them after so the first (initial) code would work.
I have two dropdowns. The options of the latter are dependent on the values of the first.
<div class="col-lg-6 col-md-6 col-sm-6">
<select id="area" name="area" required>
<option value="">Select Area</option>
<option value="1">Area I: Vision, Mission, Goals, and Objectives</option>
<option value="2">Area II: Faculty</option>
<option value="3">Area III: Curriculum and Instruction</option>
<option value="4">Area IV: Support to Students</option>
<option value="5">Area V: Research</option>
<option value="6">Area VI: Extension and Community Involvement</option>
<option value="7">Area VII: Library</option>
<option value="8">Area VIII: Physical Plant and Facilities</option>
<option value="9">Area IX: Laboratories</option>
<option value="10">Area X: Administration</option>
</select>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<select id="parameter" name="parameter" required>
<option value="">Select Parameter</option>
</select>
</div>
I tried this javascript below but the problem is the options do not append to the second select even if I tried displaying the values using alert which works perfectly fine.
Does the CSS responsible for this?
<script type="text/javascript">
$('#area').on('change', function(){
console.log($('#area').val());
$('#parameter').html('');
var area = $('#area').val();
if(area == ""){
$('#parameter').append('<option value="">Select Area first</option>');
}else{
$.ajax({
type: "POST",
url: '<?php echo base_url(); ?>search/getParameters',
data: {area: area},
dataType: "json",
success: function(data){
$('#parameter').append('<option value=""></option>');
for (var i = 0; i < data.length; i++) {
alert(data[i])
$('#parameter').append('<option value="' + i + '">' + data[i] + '</option>');
}
}
});
}
});
</script>
I have this issue using Angularjs
i am creating cascade drop down like below
<div class="col-sm-2 pr10">
<select class="PropertyType" ng-controller="LOV" ng-init="InitLov(140)" ng-model="PropertyType" ng-change="update(PropertyType)" >
<option value="" selected="selected" disabled="disabled"> {{type ? type: 'Property Type'}} </option>
<!-- <option value="">-- Select Type --</option>-->
<option ng-repeat="Lov in LovList" value="{{Lov.Value}}" >{{Lov['Lable'+Lang]}} </option>
</select>
</div>
<div class="col-sm-2 pr10">
<select class="PropertySubType" ng-controller="LOV" ng-model="PropertySubType" >
<option value="" selected="selected"disabled="disabled" >{{subType ? subType: 'Property Sub Type'}}</option>
<!-- <option value="">-- Select Sub Type --</option> -->
<option ng-repeat="Sub in SubType" value="{{Sub.Value}}" >{{Sub['Lable'+Lang]}} </option>
</select>
</div>
and the Angular file:
$scope.update = function (id) {
$http.post("API/WebsiteService.asmx/getSubPropertyLov", { type: id }).success(function (data) {
debugger;
var rr = eval('(' + data.d + ')');
$scope.SubType = rr.result;
});
}
the API returns data, and the SubType scope gets it, but it doesn't change the dropdown data (PropertySubType),
*the function is inside LOV controller.
Don't duplicated ng-controller="LOV" on each select, this way they both get different scopes. Put both selects in the scope of the same controller.
Also don't use ngRepeat, use ngOptions:
<div ng-controller="LOV">
<div class="col-sm-2 pr10">
<select class="PropertyType"
ng-init="InitLov(140)"
ng-model="PropertyType"
ng-change="update(PropertyType)"
ng-options="Lov.Value as Lov['Lable' + Lang] for Lov in LovList">
<option value="" selected="selected" disabled="disabled"> {{type || 'Property Type'}} </option>
</select>
</div>
<div class="col-sm-2 pr10">
<select class="PropertySubType"
ng-options="Sub.Value as Sub['Lable' + Lang] for Sub in SubType"
ng-model="PropertySubType">
<option value="" selected="selected" disabled="disabled">{{subType || 'Property Sub Type'}}</option>
</select>
</div>
</div>