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
Related
Goodday, recently ive tried to learn AJAX. Ive made up an example that captures the data selected from the 1st dropdown box and filter into the 2nd dropdown box. However, the AJAX request doesnt seem to run.
HTML
<?php include 'conn.php' ?>
<!DOCTYPE html>
<html>
<head>
<title>
AJAX for extensions!
</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
function fetch_select(val)
{
$.ajax({
type: 'post',
url: 'fetch_data.php',
data: {
get_option:val
},
success: function (response) {
document.getElementByID("owner_id").innerHTML=response;
}
});
}
</script>
</head>
<body>
<p id="heading">Dynamic Select Option Menu Using Ajax and PHP for Extensions</p>
<center>
<div id="select_box">
<select name="department" id="department" onchange="fetch_select(this.value);">
<option value="">Select Option</option>
<?php
$sql="SELECT Department1 FROM PIC_Approval";
$result=odbc_exec($conn,$sql);
while($row=odbc_fetch_array($result)){
$department=$row['Department1']; ?>
<option value="<?php echo $department;?>"><?php echo $department;?></option>
<?php }
?>
</select>
<select name="ownerid" id="owner_id">
</select>
</div>
</center>
</body>
</html>
fetch_data.php
<?php
include 'conn.php';
if(isset($_POST['get_option']))
{
echo $_POST['get_option'];
$department = $_POST['get_option'];
$sql1="SELECT Owner_I_Employee_ID FROM masterlist1 WHERE Department1='$department'";
$result1=odbc_exec($conn,$sql1);
while($row=odbc_fetch_array($result1))
{
$id=$row['Owner_I_Employee_ID']; ?>
<option value="<?php echo $id;?>"><?php echo $id;?></option>
<?php
}
exit;
}
?>
I am not sure what is wrong with the Request. I followed as in the tutorials i found online. I am using odbc.
Turns out it's because
document.getElementByID("owner_id")
should be
document.getElementById("owner_id")
because JavaScript is case-sensitive. The code works fine after the error is fixed.
hi i'm using select2 to style my dependent dynamic dropdown list on my php file, the problem is when i select a value from 1st dropdown to fetch data from mysql DB to 2nd dropdown list it goes to it's default style so i need some solution to solve the problem here is my files.
select2 script:
<script type="text/javascript">
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
</script>
index.php:`
<form name="form1" action="test.php" method="post">
<table>
<tr>
<td>
<select name="brand" id="branddd" class="js-example-basic-single" required>
<option disabled selected required >brand</option>
<?php
$res=mysqli_query($link,"select * from brand");
while($row=mysqli_fetch_array($res))
{
?>
<option value="<?php echo $row["id"];?>"><?php echo $row["name"];?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>
<select name="model" id="model" class="js-example-basic-single" required>
<option disabled selected required >model</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="submit"></td>
</tr>
</table>
</form>
script to fetch DB values:
<script type="text/javascript">
function change_brand()
{
var xmlhttp=new XMLHttpRequest () ;
xmlhttp.open("GET","ajax.php?brand="+document.getElementById("branddd").value,false) ;
xmlhttp.send(null) ;
document.getElementById("model").innerHTML=xmlhttp.responseText ;
}
$(function(){
$('#branddd').on('change',function(){
this.value && // if value!="" then call ajax
$.get('ajax.php',{brand:this.value},function(response){
$('select[name="model"]').html(response);
});
});
});
</script>
ajax.php:
<?php
$link=mysqli_connect("localhost","root","");
mysqli_select_db($link,"test_db");
$brand=$_GET["brand"];
if($brand!="")
{
$res=mysqli_query($link,"select * from model where brand_id=$brand");
echo "<select>";
while($row=mysqli_fetch_array($res))
{
echo "<option>"; echo $row["name"]; echo "</option>";
}
echo "</select>";
}
?>
This is your styled select element:
<select name="model" id="model" class="js-example-basic-single" required>
You need to add the name, id, and class attributes to your PHP echo. Something like this:
echo "<select name=\"model\" id=\"model\" class=\"js-example-basic-single\" required>";
But a much better way would be to not write out a new select element and replace it with the html function. Instead, output the data from your PHP page as a JSON object, then add those options to the select element.
JSON object:
{
"option1": "Data A",
"option2": "Data B",
"option3": "Data C"
}
JavaScript:
function change_brand() {
$.ajax({
url: "ajax.php?brand="+document.getElementById("branddd").value,
dataType: "json",
success: function(data) {
var name, select, option;
select = document.getElementById('model');
// Clear the old options
select.options.length = 0;
// Load the new options
for (name in data) {
if (data.hasOwnProperty(name)) {
select.options.add(new Option(data[name], name));
}
}
}
});
}
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 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);
});
});
});
Here is my code of html, ajax and php. The value returned by selected is to be passed in php
I want to use these four selected value (bank, state, district and city) in text form (bank_name, state_name, district_name, city_name) in my php file to show the data based on these value. If I use $bank=$_POST['bank[1]']; it gives the bank_id and so on, not the bank_name which was selected
<?php
include_once 'dbconfig.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Dependent Select Box using jQuery and PHP</title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".state").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_district.php",
data: dataString,
cache: false,
success: function(html)
{
$(".district").html(html);
}
});
});
$(".state").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_city.php",
data: dataString,
cache: false,
success: function(html)
{
$(".city").html(html);
}
});
});
});
</script>
<style>
label
{
font-weight:bold;
padding:10px;
}
div
{
margin-top:100px;
}
select
{
width:200px;
height:35px;
}
</style>
</head>
<form name="frm_ifsc" method="post" action="show_ifsc.php">
<body>
<center>
<div>
<label>Bank:</label>
<select name="bank" class="bank">
<option selected="selected">--Select Bank--</option>
<?php
$stmt = $DB_con->prepare("SELECT * FROM tbl_banks");
$stmt->execute();
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['bank_id']; ?>"><?php echo $row['bank_name']; ?></option>
<?php
}
?>
</select>
<br>
<br>
<label>State:</label>
<select name="state" class="state">
<option selected="selected">--Select State--</option>
<?php
$stmt = $DB_con->prepare("SELECT * FROM tbl_state");
$stmt->execute();
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['state_id']; ?>"><?php echo $row['state_name']; ?></option>
<?php
}
?>
</select>
<br>
<br>
<label>District:</label> <select name="district" class="district">
<option selected="selected">--Select District--</option>
</select>
<br>
<br>
<label>City:</label> <select name="city" class="city">
<option selected="selected">--Select City--</option>
</select>
<br>
</div>
<br />
<br>
<input type="submit" name="submit" value="Search" class="btnRegister">
</center>
</form>
</body>
</html>
You can fix this a number of ways. I think the two easiest are:
Modify JavaScript to get option text:
var id = $( this ).html();
var dataString = "id=" + id;
Modify select HTML:
<option value="<?php echo $row['bank_name']; ?>"><?php echo $row['bank_name']; ?></option>
Good luck!