How to pass multiple select ids to ajax function - javascript

I have created multiple select option, onchange i want to pass all multiple select ids to jquery ajax.
presently single select option params is working fine. how to do the same with multiple options?
Here is my select input and script
function update_subscategories_div(id) {
console.log(id);
jQuery.ajax({
url: "/get_subscategories",
type: "GET",
data: {
"parent_id": id
},
dataType: "html",
success: function(data) {
jQuery("#versionsDiv").html(data);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="customer[category_ids][]" id="customer_category_ids_" onchange="update_subscategories_div(this)" multiple="multiple" class="form-control">
<option value="">Select a parent category</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>

Your current code doesn't make much sense...you're passing id to the server but this is a HTMLelement, not the selected ID (because you passed this to the function). Here's how you can get all the currently selected IDs. This will pass the selection to the server as an array.
N.B. I used a jQuery unobtrusive event handler, which is generally considered to be a better practice than inline event handling code (more visible, more maintainable, separate of code from layout).
jQuery(function() {
jQuery("#customer_category_ids_").change(function() {
var ids = $(this).val();
console.log(ids);
jQuery.ajax({
url: "/get_subscategories",
type: "GET",
data: {
"ids": ids
},
dataType: "html",
success: function(data) {
jQuery("#versionsDiv").html(data);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="customer[category_ids][]" id="customer_category_ids_" multiple="multiple" class="form-control">
<option value="">Select a parent category</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>

Related

Send selected value of two dropdown to PHP script without Submit using AJAX

I have two dropdown list, I want to know what user has selected in these dropdowns, based on that I need fetch data from DB using PHP. Please note that There is no submit button. I don't know how send javascript var value to PHP code.
Here it is what I've done so far
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$('select.day').on('change',function(){
var select = $(this).val();
alert(select);
});
$.ajax({
Type : "POST",
url : "new.php",
data : {name : select},
success : function(msg)
{
$('#d').text(msg);
alert(msg);
}
});
});
</script>
</head>
<body>
<p id="d"></p>
<Select class="day" onchange="getTimeFrame(this.value)">
<Option >Today</Option>
<Option>This Week</Option>
<Option>Last Week</Option>
</Select>
<Select class="filter" onchange="getFilterType(this.value)">
<Option >User</Option>
<Option>Client</Option>
<Option>Project</Option>
</Select>
</body>
</html>
Here it is PHP file
<?php
// $time = $_POST['select'];
$filter = $_POST['name'];
//echo "Hello from new";
echo $filter;
?>
But nothing seems working for me. Anybody know how to achieve this?
Add your Ajax code inside the onchange event of the select .
Updated
typo change type instead Type ,is not caps .All are small letter.Javascript is case sensitive
$('select.day').on('change', function() {
var select = $(this).val();
$.ajax({
type: "POST",
url: "new.php",
data: {
name: select
},
success: function(msg) {
$('#d').text(msg);
alert(msg);
}
});
})
Change Html as like this
<Select class="day">
<Option >Today</Option>
<Option>This Week</Option>
<Option>Last Week</Option>
</Select>
For send both drop down value try this
$('select.day').on('change', function() {
var select = $('select.day').map(function(){
return $(this).val()
}).get();
console.log(select)
$.ajax({
type: "POST",
url: "new.php",
data: {
name: select
},
success: function(msg) {
$('#d').text(msg);
alert(msg);
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Select class="day" >
<Option >Today</Option>
<Option>This Week</Option>
<Option>Last Week</Option>
</Select>
<Select class="day filter" >
<Option >User</Option>
<Option>Client</Option>
<Option>Project</Option>
</Select>
In your onchange Event you only get with select = $(this)... the value of the changed selectbox. You have to reference to the other one, too with Name = $(".filter")..... and then send it with ajax

How to program Select Menu's using Javascript

I'm new here to stack overflow and I've been searching on how to program drop-down menus in HTML and jscript. I've found a few decent examples but since I don't know much about jscript. I'm trying to integrate what I currently have to work with the labVIEW webservice. I will add the code I have below. Basically the buttons I have work perfectly with the javascript and the buttons. I want the select menus to work exactly the same so when I select a value it will call a function that will assign the value I need to the URL. For example when the start button is pushed it assigns start=1 in the url "digital" I want the same thing to happen for the select menu. When I select 511 from the dropdown menu I want it to assign the variable patternselector=1 in the url digital. Same thing for 2047 patternselector=0 in the url"digital" and so forth etc. I don't know what I'm doing at all so if someone could please help me right the example code/ function so I know how to program all of my other select menu's I have that will be awesome.
<html>
<head>
<script language="javascript" type="text/javascript" src="js/jquery.js </script>
<script type="text/javascript">
<select id="category" class="icon-menu" onchange="myFunction()"></select>
$(function() {
function onDataReceived(data) {
// update the displayed count
$('#errorfreeseconds').text(String(data.Temperature).substring(0,4) + " degF");
}
function fetchData() {
$.ajax({
url: "digital",
type: "GET",
//data: params,
dataType: "json",
success: onDataReceived
});
setTimeout(fetchData, 1000);
}
fetchData();
$('#start').click(function(){
$.ajax({
url: "digital",
type: "GET",
data: "start=1",
//dataType: "json",
//success: onDataReceived
});
});
$('#stop').click(function(){
$.ajax({
url: "digital",
type: "GET",
data: "stop=1",
//dataType: "json",
//success: onDataReceived
});
});
});
</script>
</head>
<body>
<div id="errorfreeseconds" style="font-size: 300%">0 Error Free Seconds</div>
</br>
<button id="start"style="font-size: 200%">Start Test</button>
<button id="stop" style="font-size: 200%">Stop Test</button>
<select>
<option value="2047">2047</option>
<option value="511">511</option>
<option value="63">63</option>
<option value="71">7:1</option>
<option value="31">3:1</option>
<option value="17">1:7</option>
<option value="14">1:4</option>
<option value="13">1:3</option>
<option value="11">1:1</option>
<option value="Space">Space</option>
<option value="Mark">Mark</option>
<option value="215">2^15-1</option>
<option value="220">2^20-1</option>
<option value="223">2^23-1</option>
<option value="QRSS">QRSS</option>
</select>
<h3 style="color:green;">BAUD RATE(in Hertz)</h3>
<select>
</body>
</html>
Assuming the select element has id="mySelect" :
$('#mySelect').on('change', function() {
var value = $(this).val();
// do whatever arcane thing you need to do with the value.
});

Get the selected option of select2 using id of that option

Currently I am doing it without the select2 plugin and it works but I want to use select2 plugin
What I am trying to do here is get the selected option using the Select2 plugin and then do an ajax call
so if an option is selected the id will be passed and the ajax call will be done
$('.select2').change(function(e){
var arraypos = $(this).children(":selected").attr("id");
jQuery.ajax({
url: '/wallfly-mvc/public/dashboard/selectedProperty',
type: "POST",
data: {
selected: arraypos
},
success: function (result) {
$('#showoption').attr('id');
window.location.reload();
},
error: function (result) {
alert('Exeption:' + exception);
}
});
});
You will retrieve the selected option of a select2 input using jquery just the same you would do for a normal select input
http://jsfiddle.net/jEADR/2162/
<select id="someInputId" style="width:300px">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
$("#someInputId").select2();
$('#someInputId').change(function(e){
console.log($(this).children(":selected").attr("value"));
});

getting value from html drop down in javascript or jquery

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

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/

Categories

Resources