I have 2 simple dropdown list that if city dropdown selected have value "Balikpapan" its display specific option on service dropdown then if not its display other option :
here's my function code :
function Kurir(){
var kota = $('select[name="descity"] option:selected').text();
kurir ='';
kurir2='';
if (kota == Balikpapan){
kurir = '<option selected="true" style="display:none;">Pilih Kurir</option><option value="Kurir dalam Kota">Kurir dalam Kota</option>';
$('#service').html(kurir);
else
kurir2 = '<option selected="true" style="display:none;">Pilih Kurir</option><option value="">Pilih Kurir</option><option value="jne">JNE</option><option value="pos">POS</option><option value="tiki">TIKI</option>';
$('#service').html(kurir2);
}
}
and here's my dropdown code
<td><label for="kota">Kota</label></td>
<td><select id="descity" onchange="kurir();" class="" name="">
<option value="">Pilih Kurir</option>
<option value="Balikpapan">Balikpapan</option>
<option value="Malang">Malang</option>
<option value="Surabaya">Surabaya</option>
</select>
<td><label for="Kurir">Kurir</label></td>
<td><select id="service" onchange="DestVal();PostProvCity();" class="" name="">
<option value="">Pilih Kurir</option>
<option value="jne">JNE</option>
<option value="pos">POS</option>
<option value="tiki">TIKI</option>
</select>
You can use another option to display dropdown services as mentioned below. You can use ajax throw display content.
Test.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("select.country").change(function(){
var selectedCountry = $(".country option:selected").val();
$.ajax({
type: "POST",
url: "process-request.php",
data: { country : selectedCountry }
}).done(function(data){
$("#response").html(data);
});
});
});
</script>
</head>
<body>
<form>
<table>
<tr>
<td>
<label>Country:</label>
<select class="country">
<option>Select</option>
<option value="usa">United States</option>
<option value="india">India</option>
<option value="uk">United Kingdom</option>
</select>
</td>
<td id="response"></td>
</tr>
</table>
</form>
</body>
</html>
process-request.php
<?php
if(isset($_POST["country"])){
$country = $_POST["country"];
$countryArr = array("usa" => array("New Yourk", "Los Angeles", "California"),
"india" => array("Mumbai", "New Delhi", "Bangalore"),
"uk" => array("London", "Manchester", "Liverpool"));
if($country !== 'Select'){
echo "<label>Services:</label>";
echo "<select>";
foreach($countryArr[$country] as $value){
echo "<option>". $value . "</option>";
}
echo "</select>";
}
}
?>
Let me know if any query for the same.
Just a small modification to AddWeb Solution Pvt Ltd answer:
before the ajax function its worth deleting any tags if already present based on a previous selection so this way anytime the user makes a selection, the new results doesn't add to the previous list.
$(document).ready(function(){
$("select.country").change(function(){
$("#response option").remove(); // add this line
var selectedCountry = $(".country option:selected").val();
$.ajax({
type: "POST",
url: "process-request.php",
data: { country : selectedCountry }
}).done(function(data){
$("#response").html(data);
});
});
});
Related
In my project, I use jqpagination. And I want to define the records of each page, so I use select tag in my web page.
The problem is when I change select tag, the value returned from lstajax.php is not the same. sometimes it is xie1, but sometimes it is xie2.
I have tested, the returned value is random. For example, when i chosed 30 first, the value is xie1. When i chosed 30 next time, the value maybe xie1 or maybe xie2.
My js code:
<link rel="stylesheet" href="jsui/jqpagination.css" />
<script src="jsui/jquery-3.2.1.min.js"></script>
<script src="jsui/jquery.jqpagination.js"></script>
<script>
$(document).ready(function()
{
var rtnv = "<?php session_start();echo $_SESSION['rtNum']?>";
var pgrNum=$('#pgnId').val();
var mpn=Math.ceil(rtnv/pgrNum);
$('.pagination').jqPagination({
max_page:mpn,
page_string:'Page {current_page} of {max_page}',
paged:function(page){
$.ajax({
dataType:'html',
type:"POST",
url:"lstajax.php",
data:{pageNum:page,pgrNum:pgrNum},
success:function(data)
{
$('#div2').html(data);
}
});
}
});
$('#pgnId').change(function(){
var pages="1";
$('.pagination').jqPagination('option','current_page',pages);
var rtnvs = "<?php session_start();echo $_SESSION['rtNum']?>";
var pgrNums=$('#pgnId').val();
var mpns=Math.ceil(rtnvs/pgrNums);
$('.pagination').jqPagination('option','max_page',mpns);
$.ajax({
dataType:'html',
type:"POST",
url:"lstajax.php",
data:{pageNums:pages,pgrNums:pgrNums},
success:function(data)
{
$('#div2').html(data);
}
});
});
});
</script>
My lstajax.php code:
<?php
if(isset($_POST['pageNum']))
{
echo "xie1";
}
if(isset($_POST['pageNums']))
{
echo "xie2";
}
?>
My html code:
<div class="pagination" style="clear:both;display:block;margin-left:40%">
«
‹
<input type="text" readonly="readonly" data-max-page="80"/>
›
»
<label>eachpage:</label>
<select name="pgNum" id="pgnId">
<option value="10">10</option>
<option value="15">15</option>
<option value="20" selected="selected">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
</div>
var options={'trigger':false}
in the method:
base.cassMthod=function(method,key,value)
in the file:
jquery.jqPagination.js
view code i have : file one to show data two select box second select box depand on the first select box value
<?php
$con=mysql_connect("localhost","root","root");
mysql_select_db("register",$con);
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#category").change(function(){
var value=$("#category option:selected").val();
$.ajax({
type:'post',
url:'subcat.php',
data:{ kvalue : value },
datatype:'json',
success:function(data){
alert(data);
$("#response").html(data);
}
})
})
})
</script>
<title></title>
</head>
<body>
<form method="post">
<table>
<tr>
<td>category:</td>
<td><select id="category">
<option>Select Category</option>
<?php
$query=mysql_query("select * from category");
while($row=mysql_fetch_array($query)){
?>
<option value="<?php echo $row['category'];?>"><?php echo $row['category'];?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Sub cat:</td>
<td><select >
<option >dependent dropdown</option>
<option id="response"></option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
another page for ajax call:
This page return the data in json format to first file .problem is that i have one select box there i want to get these value in my option but i m getting this value and if m going to select on then all value auto selectrd
<?php
$con=mysql_connect("localhost","root","root");
mysql_select_db("register",$con);
$val=strtolower($_POST['kvalue']);
if($val=='mobile'){
$query=mysql_query("select mobile from subcat");
while($row=mysql_fetch_array($query)){
$row[] = $r;
print json_encode($row);
echo $row['mobile']."</br>";
}
}
problem``
i want to fetch data from json in html option but i get the value but it all in selected form how can i get or select the value one which i want??
check this demo code which select option update and your your connection and query , i just set manually data for test. this is your html file
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#category").change(function () {
var value = $("#category option:selected").val();
$.ajax({
type: 'post',
url: 'subcat.php',
data: {kvalue: value},
datatype: 'json',
success: function (data) {
alert(data);
$("#response").html(data);
}
})
})
})
</script>
<title></title>
</head>
<body>
<form method="post">
<table>
<tr>
<td>category:</td>
<td><select id="category">
<option>Select Category</option>
<option value="mobile">Mobile</option>
<option value="TV">Tv</option>
<option value="Phone">Phone</option>
</select>
</td>
</tr>
<tr>
<td>Sub cat:</td>
<td>
<select id="response">
<option>dependent dropdown</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
and this is your subcat.php file .i set manually data for test. if you want to select depend your option data just update your query
<?php
//$con=mysql_connect("localhost","root","root");
//mysql_select_db("register",$con);
$val = strtolower($_POST['kvalue']);
if ($val == 'mobile') {
//$query=mysql_query("select mobile from subcat");
$data = array('Option1', 'Option2', 'Option3');
foreach ($data as $value => $key) {
echo '<option value="' . $value . '">' . $key . '</option>';
}
}
if you select second option value using ajax send option then update query like
//$query=mysql_query("select mobile from subcat where subcat = '$val'");
and this is my demo data so need to replace your sql data
I have a table containing some fields like name,address,item status in a table. I have values like Item Picked, Item Not Picked.
I have a select box like given below :
<select name="option" class="optionn">
<option value="">All</option>
<option value="itempicked">Item Picked</option>
<option value="itemnotpicked">Item Not Picked</option>
</select>
I want to sort the table contents according to the selected value in the select box.
How to do this ? Can anyone say how to do this ?
<select name="option" class="optionn" id="items">
<option value="">All</option>
<option value="itempicked">Item Picked</option>
<option value="itemnotpicked">Item Not Picked</option>
</select>
$.ajax({
url : 'example.php',
data:{
item:$('#items').val()
},
type: 'POST',
success: function(result){
console.log(result); // result set in table
}
})
in example.php file write query to get sorting data
Ex. $query = "SELECT * FROM items WHERE items = ".$_POST['item'];
This is just the example it's not your answer i hope it's help you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="wrapper">
<div>
<select class="options" name="">
<option value="1">item_1</option>
<option value="1">item_2</option>
<option value="1">item_3</option>
</select>
</div>
</div>
<button type="button" class="addme" name="button">Add More</button>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('.addme').click(function(){
$.ajax({
url:'getData.php',
type:'GET',
success:function(result){
console.log(result);
}
})
});
});
getData.php File
$query = "select * from items";
$row = mysql_query($query);
echo "<select>";
while($data = mysql_fetch_array($row)){
echo "<option>".$data['item_name']."</option>";
}
echo "</select>";
I have a problem on passing more than one values from a dropdown menu. What I am doing is an attendance system where a dropdown menu containing the choices of attendance status per student. User will then choose the attendance status of each student accordingly, and what I am trying to do is to pass the status that has been chosen to another page.
I am trying to insert the selected attendance status into an array using AJAX and then pass the array to another page. Here's what I have so far:
todaysattendance.php
//dropdown menu
<tr>
<td> $fetched_fName $fetched_lName </td>
<td> <select name='okselect' id='okselect'>
<option value='no'> </option>
<option value='p' name='p' style='color:green; font-weight:bold;'>Present</option>
<option value='ea' name='ea' style='color:#e1c872; font-weight:bold;'>Excused Absent</option>
<option value='ua' name='ua' style='color:#e34c4c; font-weight:bold;'>Unexcused Absent</option>
<option value='et' name='et' style='color:blue; font-weight:bold;'>Excused Tardy</option>
<option value='ut' name='ut' style='color:purple; font-weight:bold;'>Unexcused Tardy</option>
<option value='sr' name='sr' style='color:black; font-weight:bold;'>School's Representative</option>
</select></td> </tr>
todaysattendance.php
//AJAX code
var tempArr = [];
$("#okselect").change(function()
{
var output = getValues(this, function ()
{
for (var i=0;i<output.length;i++)
{
tempArr.push(output);
};
});
$.ajax({
type: "POST",
url: "add_attendance_check.php",
data: {tempArr: tempArr},
success: function(data) {
//
},
error: function(e) {
console.log(e.message);
}
});
});
add_attendance_check.php
$passed_attstatus = array();
$thestatus = $_POST['tempArr'];
array_push($passed_attstatus, $thestatus);
But from this coding, let's say I took the attendance status for 10 students, I only managed to get the last student's attendance status. I need help on this. Thank you very much in advance!
print variable dropdown_value in add_attendance_check you will get the value of selected dropdown.
<form method="post" action="" role="search">
<select name='okselect' id='okselect'>
<option value='no'> </option>
<option value='p' name='p' style='color:green; font-weight:bold;'>Present</option>
<option value='ea' name='ea' style='color:#e1c872; font-weight:bold;'>Excused Absent</option>
<option value='ua' name='ua' style='color:#e34c4c; font-weight:bold;'>Unexcused Absent</option>
<option value='et' name='et' style='color:blue; font-weight:bold;'>Excused Tardy</option>
<option value='ut' name='ut' style='color:purple; font-weight:bold;'>Unexcused Tardy</option>
<option value='sr' name='sr' style='color:black; font-weight:bold;'>School's Representative</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
jQuery(document).ready(function() {
jQuery("#okselect").change(function() {
var dropdown_value = $('#okselect').val();
$.ajax({
type: "POST",
url: "add_attendance_check.php",
data: {dropdown_value: dropdown_value},
success: function(data) {
//
},
error: function(e) {
console.log(e.message);
}
});
});
});
</script>
I have a great news, I finally solved the problem. All I need to do is to change this line in todaysattendance.php from
<select name='okselect' id='okselect'>
into
<select name='okselect[]' id='okselect'>
In add_attendance_check.php, I simply changed to
$passed_attstatus = array();
$thestatus = $_POST['okselect'];
array_push($passed_attstatus, $thestatus);
No need for AJAX from the very beginning. Anyway I would like to thank everyone who responded. Have a good day!
<select name='okselect' id='okselect' onchange="abc(this.value)">
//your option
</select>
And Ajax call abc function inner abc(value)
I want to retrieve districts and state from the database, and also to populate second dropdown list based on first dropdown list. In my code below the values are inserted directly:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="C:\Program Files\BitNami WAPPStack\apache2\htdocs \Prj\Online\jquery-1.9.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var options = $('#test2 option');
$('#test1').on('change', function(e) {
$('#test2').append(options);
if ($(this).val() != 'Select') {
$('#test2 option[value!=' + $(this).val() + ']').remove();
} else {
$('#test2').val('Select');
}
});
});
</script>
<form name="form1" method="post" action="fid1.html">
<select name="test1" id="test1">
<option value="Select">Select</option>
<option value="a">TamilNadu</option>
<option value="b">Kerala</option>
<option value="c">Andhra</option>
</select>
<select id="test2" name="test2">
<option value="Select">Select</option>
<option value="a">Chennai</option>
<option value="a">Trichy</option>
<option value="a">Madurai</option>
<option value="b">Trivandram</option>
<option value="b">Cochin</option>
<option value="b">Azhapuzha</option>
<option value="c">Hyderabad</option>
</select>
</form>
</head>
</html>
for that purpose you should use Ajax call on your first drop box .
Ajax is a server side tools to fetch data from database.
Create a ajax function, for example get_country()
$(function() {
$('#test1').change( function() {
var val = $(this).val();
$.ajax({
url: 'findState.php',
dataType: 'html',
data: { country : val },
success: function(data) {
$('#state').html( data );
}
});
}
else {
$('#state').val('').hide();
$('#othstate').show();
}
});
});
now do your database query on findstate.php and use state div to show particuler state list.