<select class="select2 form-control select2-hidden-accessible" data-placeholder="Filtre Seçiniz..." id="Yazarlist" multiple="" name="Yazarlist" tabindex="-1" aria-hidden="true">
<option value="3">Ahmet Test 2</option>
<option value="4">Ahmet Test 3</option>
</select>
This is what i rendering using ajax by this code:
success: function (response) {
var responseString = "";
for (i in response) {
responseString += "<option value='" + response[i].Value + "'>" + response[i].Text + "</option>";
}
$('#Yazarlist').html(responseString);
}
When i View page source i get this:
<select class="select2 form-control" data-placeholder="Filtre Seçiniz..." id="Yazarlist" multiple="multiple" name="Yazarlist"></select>
So When i select the thing in this multiselect input i get nothing in FormCollection in my ActionMethod
try
$('#Yazarlist').append(responseString);
in your ajax
Related
im using ajax for laravel dropdown it was working but when i tiring to submit form it was giving id number
im getting right input in dropdown field when i try to submit page it was giving id number instead of dropdown value
i what to get value of MS OFFICE AND 1000 BUT IT STORING IN DATA BASCE {COURES TYPE C_1402:}
{ COURSE PRICE C_1402:}
my view
my network tab showing this id
my view page
<div class="col-md-4">
<div class="form-group">
<label for="location1">Course Type :<span class="danger">*</span> </label>
<select class="custom-select form-control required" name="student_course" id="student_courses" name="location" required>
<option value="">Select Course</option>
#foreach ($course_name as $key => $value)
<option value="{{ $key }}">{{ $value }}</option>
#endforeach
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="videoUrl1">Course Price :</label>
<select name="course_Price" id="course_Prices" class="form-control dynamic" data-dependent="course_Price">
<option value=""></option>
</select>
</div>
</div>
ajax
<script type="text/javascript">
$(document).ready(function() {
$('#student_courses').on('change', function() {
var stateID = $(this).val();
if(stateID) {
$.ajax({
url: '/Student_Course_get_price/'+stateID,
type: "GET",
dataType: "json",
success:function(data) {
$('#course_Prices').empty();
$.each(data, function(key, value) {
$('#course_Prices').append('<option value="'+ key +'">'+ value +'</option>');
});
}
});
}else{
$('#course_Prices').empty();
}
});
});
</script>
my controller
public function Student_Course_get()
{
$course_name = DB::table("courses")->pluck('COURSE_NAME','COURSE_NAME_id');
return view('Admin/Student.Student_enrollment',compact('course_name'));
}
public function Student_Course_get_price($COURSE_NAME_id)
{
$cities = DB::table("courses")
->where("C_id",$COURSE_NAME_id)
->pluck('COURSE_AMOUNT','C_id');
return json_encode($cities);
}
The value of your select option is a key not the value you see in the UI which will presumably be the 'C_id'.
Change your
$('#course_Prices').append('<option value="'+ key +'">'+ value +'</option>');
To
$('#course_Prices').append('<option value="'+ value +'">'+ value +'</option>');
I am making 2 dropdown which is the second one is dependent from first one. And here is my view code:
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="form-group">
<label class="form-label">General</label>
<select class="form-control formselect required"
placeholder="Select Category" id="sub_category_name">
<option value="0" disabled selected>Select
Main Category*</option>
#foreach($data as $categories)
<option value="{{ $categories->id }}">
{{ ucfirst($categories->catname) }}</option>
#endforeach
</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="form-group">
<label class="form-label">Sub</label>
<select class="form-control formselect required"
placeholder="Select Sub Category" id="sub_category">
</select>
</div>
</div>
Then here is my code in controller :
public function index(Request $request)
{
$data = DB::table('cats')->get();
return view('admin.genc.gencEntry')->with('data', $data);
}
public function subcat($id){
echo json_encode(DB::table('subcats')->where('catid', $id)->get());
}
And ajax is here:
<script>
$(document).ready(function () {
$('#sub_category_name').on('change', function () {
let id = $(this).val();
$('#sub_category').empty();
$('#sub_category').append(`<option value="0" disabled selected>Processing...</option>`);
$.ajax({
type: 'GET',
url: 'subcat/' + id,
success: function (response) {
var response = JSON.parse(response);
console.log(response);
$('#sub_category').empty();
$('#sub_category').append(`<option value="0" disabled selected>Select Sub Category*</option>`);
response.forEach(element => {
$('#sub_category').append(`<option value="${element['id']}">${element['subcatname']}</option>`);
});
}
});
});
});
</script>
But when i select a option from first dropdown, second one is not showing anything.
But i can see XHR finished loading: GET "http://www.example.com:8000/genc/subcat/7" in my console.
Can someone tell me where is the error causing the empty dropdown?
It's look like issue with your loop syntax, use it like
$.each(response, function(key,element) {
$('#sub_category').append(<option value="${element['id']}">${element['subcatname']}</option>);
});
My problem is very strange. I have a small form which has two drop down menus to select items and create a new item with those two included. Here is the object's most basic values:
public class Rental {
private Integer id;
private Movie movie;
private Client client;
}
The problem is as follows. My HTML file has this form:
<h1>Add New Rental</h1>
<form action="#" th:action="#{/rentals/add}" th:object="${rental}" method="post" >
<div class="form-group col-md-8">
<label for="client" class="col-form-label">Client</label>
<select class="form-control" th:field="*{client}" id="client">
<option disabled selected="selected" value="0">Select Client</option>
<option th:each="clnt : ${listClients}" th:value="${clnt}" th:text="${clnt.name + ' ' + clnt.lastname}"></option>
</select>
</div>
<div class="form-group col-md-8">
<label for="movie" class="col-form-label">Movie</label>
<select class="form-control" th:field="*{movie}" id="movie">
<option disabled selected="selected" value="0">Select Movie</option>
<option th:each="mov : ${listMovies}" th:value="${mov}" th:text="${mov.title}"></option>
</select>
</div>
<div class="col-md-6">
<input type="submit" class="btn btn-primary" value=" Submit ">
</div>
</form>
And the controller that handles this page is as follows:
#RequestMapping(path = "/rentals", method = RequestMethod.GET)
public String listRentals(Model model) {
model.addAttribute("rental", new Rental());
model.addAttribute("listRentals", this.MCRService.getRentals());
model.addAttribute("listClients", this.MCRService.getClients());
model.addAttribute("listMovies", this.MCRService.getMovies());
return "rentals";
}
#RequestMapping(value = "/rentals/add", method = RequestMethod.POST)
public String addRental(#ModelAttribute("rentals") Rental rent) {
Client client = this.MCRService.getClient(rent.getClient().getId());
Movie movie = this.MCRService.getMovie(rent.getMovie().getId());
if (((client.getRentalCollection().size() + 1) * 10) <= client.getBalance()) {
client.addMovie(movie);
this.MCRService.updateClient(client);
this.MCRService.updateMovie(movie);
}
return "redirect:/rentals";
}
But when I run this, select both a client and a movie, and I press submit, the console throws a NullPointerException, and turns out that the client and the movie are both null, which is weird since I'm using the entire object in the selection. What am I doing wrong here? Is it some sort of problem with the th:value and th:field? Or is my code flawed? Any help is appreciated!
I've solved it in this way. The changes to the html were in addding selectpicker to the select's class and changing the client's and movie's option for each's value to the id.
<select class="form-control selectpicker" th:field="*{client}" id="client">
<option disabled selected="selected" value="0">Select Client</option>
<option th:each="clnt : ${listClients}" th:value="${clnt.id}" th:text="${clnt.name + ' ' + clnt.lastname}"></option>
<select class="form-control selectpicker" th:field="*{movie}" id="movie">
<option disabled selected="selected" value="0">Select Movie</option>
<option th:each="mov : ${listMovies}" th:value="${mov.id}" th:text="${mov.title}"></option>
The java wasnt modified greatly, but with those three changes, the whole thing works!
This is my html code.
<div class="form-group row add">
<label class="control-label col-sm-2" for="division_id">Division Name:</label>
<div class="col-sm-10">
<select name="district_id" id ="district_id" class="selectdistrict">
<option value="">--Select district--</option>
#foreach($atmdistrict as $cat)
<option value="{{$cat->id}}">{{$cat->name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group row add">
<label class="control-label col-sm-2" for="thana_id">Thana Name:</label>
<div class="col-sm-10">
<select name="thana_id" class="thananame" id ="thana_id" >
<option value="0" disabled="true" selected="true">Thana Name</option>
</select>
</div>
</div>
This is my ajax query for dependent dropdown.
$(document).ready(function(){
$(document).on('change','.selectdistrict',function(){
console.log("hmm its change");
var district_id=$(this).val();
console.log(district_id);
var div=$(this).parent();
var op=" ";
$.ajax({
type:'get',
url:'{!!URL::to('findThanaName')!!}',
data:{'id':district_id},
success:function(data){
console.log('success');
console.log(data);
//console.log(data.length);
op+='<option value="0" selected disabled>chose thana</option>';
for(var i=0;i<data.length;i++){
op+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
console.log(data[i].name);
}
div.find('.thananame').html(" ");
// console.log( div.find('.name').html(" "));
div.find('.select').append(op);
//console.log( div.find('.select').append(op));
},
error:function(){
console.log('error');
}
});
});
});
The console log is showing no error, and is returning the correct data. However, the drop down menu is not showing any data. I can't figure out where I am going wrong.
screenshot of the program running
try to change :
div.find('.select').append(op);
by :
$("#thana_id").html(op);
I want to populate select tag with data from api get request. Here is my html code
<div id="app">
<label for="country" class="control-label">Country</label>
<select v-model="selectedCountry" #change="onChangeCountry" name="country" id="country" class="form-control" tabindex="11">
<option selected disabled value="">Please select one</option>
#foreach($countries as $country)
<option value="{{ $country->id }}">{{ $country->name }}</option>
#endforeach
</select>
<label for="city" class="control-label">City</label>
<select v-model="cities" name="city" id="city" class="form-control" tabindex="12">
<option v-bind:value="city.id">#{{ city.name }}</option>
</select>
</div>
And now my JavaScript code:
<script type="text/javascript">
new Vue({
el: '#app',
data: {
selectedCountry: '',
cities: []
},
methods: {
onChangeCountry: function (event) {
axios.get('http://localhost:8000/api/cities/country/' + this.selectedCountry)
.then(function (
this.cities = response.data
}).catch(function(error) {
console.log('an error occured ' + error);
});
}
}
});
</script>
I'm pretty sure that the data is received because i did a lot of console.log but I don't know how to append the received data to my second select tag nor how to proceed.
Try this in the select
<select v-model="selectedCity" name="city" id="city" class="form-control" tabindex="12">
<option v-for="(city,cityIndex) in cities" :key="city.id" :value="city.id">{{ city.name }}</option>
</select>
Add 'selectedCity' to the data object and then access its value through this.selectedCity
This is in the vue docs
https://v2.vuejs.org/v2/guide/list.html
https://v2.vuejs.org/v2/guide/forms.html#Select
I finally got it working
i just needed to create a city variable in data function
and in select i don't need to bind it to array of cities[], the city variable is fine v-model="city"
<select v-model="country" class="form-control">
<option disabled value="" selected="selected">Please select one</option>
<option v-for="country in countries" :key="country.id" v-bind:value="country.id">
{{country.name}}
</option>
</select>
<script>
export default {
data() {
return {
countries: {},
country:''
}
</script>
You need to use v-for to loop the cities and create the option elements:
<select name="city" id="city" class="form-control" tabindex="12">
<option v-for="(city, index) in cities"
:key="index"
:value="city.id">#{{ city.name }}
</option>
</select>
Also, change your data property into a function so it's reactive:
data () {
return {
selectedCountry: '',
cities: []
}
}