getting value from html drop down in javascript or jquery - javascript

i have this drop down in html which is created by java script i need to fetch value from these dynamically created down with the same or id and and post it to through ajax in php can you please help how to get value from these selected drop down
<select name="criteria[]">
<option value="null" disabled selected>- select -</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<select name="criteria[]">
<option value="null" disabled selected>- select -</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

so what you can do is loop through the select list using jquery .each() and store the values in the array.
here's what you can try.
$(function(){
var array = [];
$('#btnGetVal').on('click', function(){
$('select[name="criteria[]"]').each(function(){
console.log($(this).val());
array.push($(this).val());
});
console.log(array);
$.ajax({
type: 'post',
url: 'yourfile.php',
data: {values:array},
success: function(d){
// do something on success
}
});
});
});
here's a working JSFIDDLE. Please check the console for values. Hope this helps

Your question is not completely clear. You have two identical dropdown controls, with identical names/options. Is this intentional? How do you wish to use them?
If both are required, it is a good idea to make them unique by assigning each a unique ID:
<select id="s1" name="criteria[]">
...options...
</select>
You can then access their data easily:
var sel1_val = $('#s1').val();
Because the HTML is created by javascript, you may need to use event delegation:
$(document).on('change', 'select[name="criteria[]"]', function(){
var sel1_val = $('s1').val();
var sel2_val = $('s2').val();
$.ajax({
type: 'post',
url: 'your_php_ajax_processor_file.php',
data: 'sel1=' +sel1_val+ '&sel2=' +sel2_val,
success: function(d){
if (d.length) alert(d);
}
});
});
In your PHP file:
<?php
$s1 = $_POST['sel1'];
$s2 = $_POST['sel2'];
//now, do what you need to do with the two values
The .on() is necessary to detect events for injected markup.
Note that if you are using AJAX (you are), then you don't need to use a <form> structure -- you can just use a normal div.
See these additional posts for more on AJAX:
AJAX request callback using jQuery

Related

CodeIgniter - How to pass a value from a view to a controller?

I want to pass the value which I am taking from the javascript to a controller. But I don't use any function. I just want to access the value which I get from the view in the controller. I have the following view.
<select id="selected_year" name="selected_year" data-live-search="true" style="margin-left: 27px;" >
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
I am getting the value of the drop down using the following javascript.
<script type="text/javascript">
$("#selected_year").live('change', function() {
var selected_year = $(this).attr("value");
alert(selected_year);
window.location.reload();
});
</script>
I want to just pass the value I am getting from the above javascript into a controller. Is it possible to do it?
You would accomplish that either by sending a POST request that would be dispatched to a controller action (synchronously or asynchronously, depending on your need) or passing it as a query string in the url and then checking for it's presence in your controller.
You can send your data form view to controller via three way
1.POST ,GET(form submitio).
2.making it in link(URi segment)
3.via Ajax
You can use AJAX to submit everytime user change dropdown
var data = $('#selected_year').val();
$("selected_year").on('change',function(){
$.ajax({
url: yourcontroller,
type: 'POST',
data: data,
success: function (data) {
},
});
});
Create a controller to provide the dynamic part of the url.
<script type="text/javascript">
$("#selected_year").live('change', function() {
var selected_year = $(this).attr("value");
// NEXT 2 LINES ARE THE SOLUTION. substitute your own controller URL on the next line.
$url = '<?= base_url()index.php/controller/method?>/'+selected_year+'';
window.location.reload($url);
});
</script>
Here is your controller:
function method($year){
echo $year;
}

how to change a value of drop down and to trigger a onchange functions in javascript

I was wondering if it is possible to change a value of a dropdown box dynamically and to trigger an ajax onchange function assigned to this dropdown at the same time.
so far I can only change the value of a dropdown box but the onchange function is not being called.
here is the dropdown:
<select name="ProductSelector" id="ProductSelector" onchange="getItems(this.value)">
<option value="">--Select Item--</option>
<option value="one"> Option one</option>
<option value="two"> Option Two</option>
<option value="three"> Option Three</option>
</select>
when I do this operation:
document.getElementById("ProductSelector").value = "one";
the value of the dropdown is changing, but the getItems function is not being triggered.
What am I doing wrong or may be there is another way to change a value of the doropdown which will allow me to trigger my ajax function as well?
I don't want to use JQuery. I just wandering why the function is not working if I use dinamic change and on manual change it works fine?
So, you are changing the value with JavaScript and the change event isn't triggering. So, lets trigger it then.
Trigger the event change every time you change the value via JavaScript.
No jQuery used.
Try this:
function changeVal() {
var elem = document.getElementById("ProductSelector"),
event = new Event('change');
elem.value = "one";
elem.dispatchEvent(event);
}
function getItems(val) {
alert(val);
}
changeVal();
<select name="ProductSelector" id="ProductSelector" onchange="getItems(this.value)">
<option value="">--Select Item--</option>
<option value="one">Option one</option>
<option value="two">Option Two</option>
<option value="three">Option Three</option>
</select>
I mostly do it this way:
HTML:
<select class="class-name">
<option value="1">1</option>
<option value="2">2</option>
</select>
jQuery:
$(".class-name").on("change", function() {
var value = $(this).val();
$.ajax({
type: "post",
url: "your-php-script.php",
data: { 'value' : value },
success: function (data) {
alert('This has changed');
}
);
});
Problem is changing the value with JS will not trigger the change event. Best solution would be to write a function which changes the value and triggers the change event manually.
HTML
<select name="ProductSelector" id="ProductSelector">
<option value="">--Select Item--</option>
<option value="one"> Option one</option>
<option value="two"> Option Two</option>
<option value="three"> Option Three</option>
</select>
JS (no jQuery)
//define the element so we can access it more easily
var element = document.getElementById('ProductSelector');
//define the event we want to trigger manually later
var event = new Event('change');
//add eventlistener which is triggered by selecItem()
element.addEventListener('change', function(event) {
getItems(event.target.value);
});
function getItems(val) {
alert(val);
}
//set the value and trigger the event manually
function selectItem(value){
//select the item without using the dropdown
element.value = value;
//trigger the event manually
element.dispatchEvent(event);
}
//using a function with the option you want to choose
selectItem("three");
JSFiddle
Use the working JSFiddle: Note that you have to uncomment the last line of code.
<html>
<body>
Select your favorite value:
<select id="mySelect">
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
<option value="value4">value4</option>
</select>
<script>
$(document).ready(function() {
$( "#mySelect" ).change(function() {
var value = $(this).val();
$.ajax({
type: "post",
url: "request-url.php",
data: { 'value' : value },
success: function (data) {
alert('the ajax request has been send');
}
);
});
});
</script>
</body>
</html>
You can try removing the onchange="" attribute from the select input and just use the jQuery to check for changes:
$('body').on('change', "#ProductSelector", function(){
var id = $(this).val();
//now do your ajax call with the value selected
});
"What am I doing wrong or may be there is another way to change a value of the doropdown which will allow me to trigger my ajax function as well?"
Another way of adding the event listener is by doing it "unobtrusive style".
document.getElementById('ProductSelector').addEventListener('change', function(event) {
getItems(event.target.value);
});
function getItems(val) {
// Todo: whatever needs to be done :-)
alert(val);
}
<select name="ProductSelector" id="ProductSelector">
<option value="">--Select Item--</option>
<option value="one">Option one</option>
<option value="two">Option Two</option>
<option value="three">Option Three</option>
</select>
http://jsfiddle.net/dytd96cb/

How do I select displayed value as opposed to VALUE options?

We have the following SELECT combobox that is populated dynamically with ajax and httphandler web service (.ashx).
When SELECT combobox is dynamically populated, it looks like this:
<select name="selectid" id="selectid">
<option value="">-Select an option-</option>
<option value="1">Test1</option>
<option value="2">Test2</option>
<option value="3">Test3</o4tion>
<option value="4">Test5</option>
<option value="5">Test6</option>
<option value="6">Test7</option>
</select>
Below is the js:
function getText() {
$.ajax({
url: 'rulings.ashx',
dataType: 'json'
})
.done(function(textInfo) {
$(textInfo).each(function(i, texts) {
$('<option>').val(texts.dbtextID).text(texts.textToBeDisplayed).appendTo( $('#selectid') );
})
});
}
When we display the values from the dropdown, it displays the VALUE options instead of the displayed text.
Example from the combobox above, it displays 1 instead of Test1.
How do I modify the script to show displayed text instead of VALUE options?
Try this code , just put it inside
$(document).ready(function(event){
$("#selectid").on('change',function() {
//alert($("#selectid option:selected").text());
$('#summTextvalue').html($("#selectid option:selected").text());
});
})
The ON method in jQuery can bind events to dynamically created elements.
or you can also do something like
function _bindEvent()
{
$("#selectid").on('change',function() {
alert($("#selectid option:selected").text());
});
}
and call _bindEvent() from your AJAX done method
Try this to get text, instead of value.
$('#selectid').change(function(){
var selectedVal=$(this).val();
alert($(this).children("option[value='"+selectedVal+"']").text());
});

JQuery select2 set default value from an option in list?

I want to be able to set the default/selected value of a select element using the JQuery Select2 plugin.
One more way - just add a selected = "selected" attribute to the select markup and call select2 on it. It must take your selected value. No need for extra JavaScript. Like this :
Markup
<select class="select2">
<option id="foo">Some Text</option>
<option id="bar" selected="selected">Other Text</option>
</select>
JavaScript
$('select').select2(); //oh yes just this!
See fiddle : http://jsfiddle.net/6hZFU/
Edit: (Thanks, Jay Haase!)
If this doesn't work, try setting the val property of select2 to null, to clear the value, like this:
$('select').select2("val", null); //a lil' bit more :)
After this, it is simple enough to set val to "Whatever You Want".
The above solutions did not work for me, but this code from Select2's own website did:
$('select').val('US'); // Select the option with a value of 'US'
$('select').trigger('change'); // Notify any JS components that the value changed
Webpage found here
Hope this helps for anyone who is struggling, like I was.
$("#id").select2("val", null); //this will not work..you can try
You should actually do this...intialise and then set the value..well this is also the way it worked for me.
$("#id").select2().select2("val", null);
$("#id").select2().select2("val", 'oneofthevaluehere');
One way to accomplish this is...
$('select').select2().select2('val', $('.select2 option:eq(1)').val());
So basically you first initalize the plugin then specify the default value using the 'val' parameter. The actual value is taken from the specified option, in this case #1. So the selected value from this example would be "bar".
<select class=".select2">
<option id="foo">Some Text</option>
<option id="bar">Other Text</option>
</select>
Hope this is useful to someone else.
For 4.x version
$('#select2Id').val(__INDEX__).trigger('change');
to select value with INDEX
$('#select2Id').val('').trigger('change');
to select nothing (show placeholder if it is)
Came from the future? Looking for the ajax source default value ?
// Set up the Select2 control
$('#mySelect2').select2({
ajax: {
url: '/api/students'
}
});
// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
type: 'GET',
url: '/api/students/s/' + studentId
}).then(function (data) {
// create the option and append to Select2
var option = new Option(data.full_name, data.id, true, true);
studentSelect.append(option).trigger('change');
// manually trigger the `select2:select` event
studentSelect.trigger({
type: 'select2:select',
params: {
data: data
}
});
});
You're welcome.
Reference:
https://select2.org/programmatic-control/add-select-clear-items#preselecting-options-in-an-remotely-sourced-ajax-select2
Step 1: You need to append one blank option with a blank value in your select tag.
Step 2: Add data-placeholder attribute in select tag with a placeholder value
HTML
<select class="select2" data-placeholder='--Select--'>
<option value=''>--Select--</option>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
</select>
jQuery
$('.select2').select2({
placeholder: $(this).data('placeholder')
});
OR
$('.select2').select2({
placeholder: 'Custom placeholder text'
});
e.g.
var option = new Option(data.full_name, data.id, true, true);
studentSelect.append(option).trigger('change');
you can see it here https://select2.org/programmatic-control/add-select-clear-items
Don't know others issue, Only this code worked for me.
$('select').val('').select2();
Normally we usually use active but in select2, changes to selected="selected"
Example using Python/Flask
HTML:
<select id="role" name="role[]" multiple="multiple" class="js-example-basic-multiple form-control">
{% for x in list%}
<option selected="selected" value="{{x[0]}}">{{x[1]}}</option>
{% endfor %}
</select>
JQuery:
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
$(".js-example-theme-multiple").select2({
theme: "classic",
placeholder: 'Select your option...'
});
It's easy. For example I want to select option with value 2 in default:
HTML:
<select class="select2" id="selectBox">
<option value="1">Some Text</option>
<option value="2">Other Text</option>
</select>
Javascript:
$("#selectBox").val('2').trigger('change')
$('select').select2("val",null);
If you are using an array data source you can do something like below -
$(".select").select2({
data: data_names
});
data_names.forEach(function(name) {
if (name.selected) {
$(".select").select2('val', name.id);
}
});
This assumes that out of your data set the one item which you want to set as default has an additional attribute called selected and we use that to set the value.
For ajax select2 multiple select dropdown i did like this;
//preset element values
//topics is an array of format [{"id":"","text":""}, .....]
$(id).val(topics);
setTimeout(function(){
ajaxTopicDropdown(id,
2,location.origin+"/api for gettings topics/",
"Pick a topic", true, 5);
},1);
// ajaxtopicDropdown is dry fucntion to get topics for diffrent element and url

Alternative to .change in jquery?

I'm trying to fire an ajax event, and passing the value of select list options as arguments in the ajax call. Unfortunately, I'm firing the call on the .change event, and it is passing the values of the select option before the new option has been selected (i.e passing the previously selected options values). Is there an event which will get the current values of the option selected? Much thanks in advance,
<select id='theList'>
<option> Option 1</option>
<option> Option 2</option>
</select>
In the JS:
$('#theList').change( function() {
$.getJSON('Home/MethodName', { var1: Option1Value, var2: MiscValue}, function(data) {
//Execute instructions here
}
)});
I wanted to use .trigger, but I think that fires beforehand as well.
I think .change() is what you want, but you're misusing it. The change event fires after the value has changed. In your handler, you need to read the new value:
$('#theList').change( function() {
var value = $('#theList').val();
$.getJSON('Home/MethodName', { your_key: value }, function(data) {
// ...
}
)});
You also might want to set values on your <option> tags:
<option value="something"> Option 2</option>
You must be doing something wrong when getting the current select value. The following works correctly for me.
http://jsfiddle.net/TJ2eS/
<select id="demo">
<option value=""></option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
$("#demo").change(function() {
alert("current select value " + $(this).val());
});
A word of warning, .change is now defunct, you should use...
.on('change', function()
Like that.

Categories

Resources