How to program Select Menu's using Javascript - 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.
});

Related

How to pass multiple select ids to ajax function

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>

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

ajax function what to put in url

sorry for asking such a basic question, but i am new to ajax and i couldn't find a documentation (i dont even know the name of this ajax syntax).i understand other parts of this code snippet but i don't know what am i supposed to put in the url part of the $.ajax function. please help
<form method="GET" action="">
<select name="docSpec" id="docSpec">
<option value="Pulmonary" selected="selected">Pulmonary</option>
<option value="Physician">Physician</option>
<option value="General">General</option>
<option value="Cardiologist">Cardiologist</option>
<option value="pediatrics">pediatrics</option>
</select>
</form>
js:
function do_something() {
var selected = $('#docSpec').val();
$.ajax({
this part-- > url: '/you/php/script.php',
type: 'POST',
dataType: 'json',
data: {
value: selected
},
success: function (data) {
$('#my_div').html(data);
}
});
}
this is the javascript! by the way, i am trying to get a selected option value from a <select> ("supposedly on change as a trigger") without having to submit the form.
You can get the selected value of the <select> using
$('#docSpec').val();
You don't need to use ajax for that. Changing the selected option of a <select> will not trigger form submission or reload the page by default.
You can get the value when it is changed using the change() method:
$('#docSpec').change(function(){
alert(this.value); // You can access the new value here
});

Retain filtering option when paginating

I'm trying to add a new feature to this pagination/filtering script but so far, without succes. I want that, when you change the page, the filter you picked from the top right corner select (that with "Ordonare dupa...) to remain picked instead of switching back to the first option.
This is my website - http://www.wheelsmarket.ro/cautare/jante/1
To paginate/filter i used this function:
$(document).ready(function()
{
$('.sortare').on('change', function(){
$.ajax({
url: '/filtrare-jante.php',
type: 'POST',
data: {'selected' : $(this).val(), 'pagina_id' : <?php echo $_GET['pagina'];?>},
success: function(data){
console.log(data); // do something with what is returned
$('#myTest').html(data);
$('#queryInitial').html('null');
}
});
});
All the querys are made inside a #myTest div, and the myTest div gets changed without reloading when you change that select. The problem is that the select box is out of #myTest div, so i doubt that i can make use of that function i have.
ex:
<select class="sortare select" >
<option value="1">cele mai noi</option>
<option value="2">cele mai ieftine</option>
<option value="3">cele mai scumpe</option>
</select>
<div id="myTest">
code
</div>
If i understood correctly you need something like :
1) Add id to your options:
<select class="sortare select" >
<option id="sel1" value="1">cele mai noi</option>
<option id="sel2" value="2">cele mai ieftine</option>
<option id="sel3" value="3">cele mai scumpe</option>
</select>
<div id="myTest">
code
</div>
AND change tha attr() to selected in jquery :
$(document).ready(function()
{
$('.sortare').on('change', function(){
selValue = $(this).val(); //---> Store this value in a variable.
$.ajax({
url: '/filtrare-jante.php',
type: 'POST',
data: {'selected' : $(this).val(), 'pagina_id' : <?php echo $_GET['pagina'];?>},
success: function(data){
console.log(data); // do something with what is returned
$('#myTest').html(data);
$('#queryInitial').html('null');
$('#sel'+selValue).attr("selected","selected"); //---> Use the variable we created to determine which option should be set to selected dynamically
}
});
});

Setting multiple id in option

Hello i am making option to choose among few ips and as its auto generated with php all option id="userip" is same. I face problem when i choose 2nd, 3rd or even 4th it auto take first ip which is 127.0.0.1 even if in option i choose ip 127.0.2.2 or any other.
I wanted to solve this so wanted to know best way to do it.
<div class="row"> Choose ip:
<select name="search">
<option id="userip">127.0.0.1</option>
<option id="userip">127.0.2.2</option>
<option id="userip">127.3.3.3</option>
<option id="userip">127.0.4.4</option>
</select>
<input class="adm" type="button" onclick="getuser()" value="Get Result">
</div>
Here is my js
function getuser() {
var e = $("#userip").val();
$("#showuser").html("")
$.ajax({
url: "adm.php",
type: "post",
data: "action=getuser&search="+e+"",
dataType: "json",
success: function (e) {
// do something
},
error: function () {}
})
}
ID must be unique at the page:
<div class="row"> Choose ip:
<select name="search" id="userip">
<option>127.0.0.1</option>
<option>127.0.2.2</option>
<option>127.3.3.3</option>
<option>127.0.4.4</option>
</select>
<input class="adm" type="button" onclick="getuser()" value="Get Result">
</div>
And for select option value, use child selector. See jquery official documentation
var e = $("#userip option:selected").text();
Or
var e = $("#userip").val();
just fetch the value of the search field. you can also use the callback onchange.
HTML code
<div class="row"> Choose ip:
<select name="search" id="search" onchange="getuser()">
<option id="userip">127.0.0.1</option>
<option id="userip">127.0.2.2</option>
<option id="userip">127.3.3.3</option>
<option id="userip">127.0.4.4</option>
</select>
</div>
JS code
function getuser() {
var e = $("#search").val();
$("#showuser").html("")
$.ajax({
url: "adm.php",
type: "post",
data: "action=getuser&search="+e+"",
dataType: "json",
success: function (e) {
// do something
},
error: function () {}
})
}

Categories

Resources