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!
Related
I want to fetch value through jquery Ajax in PHP. but when I run below this code value is fetch properly but all value are joined together when fetching and together value print all field, but I want to print the separate value in the separate field. my code is below, please solve this problem
index.php
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<select name="Pro" onChange="my_validate_func()" id="pro_serv">
<option value=""></option>
<option value="" ><font size="-1">Add New Product</font></option>
<option value="Development"><font size="-1">Development</font></option>
<option value="Maintance"><font size="-1">Maintance</font></option>
</select>
<br />
<input type="text" name="desc" id="desc" value="" />
<br />
<input type="text" name="unitprice" id="unitprice" value="" />
<br /><input type="text" name="discount" />
<script type="text/javascript" src="bootstrap/jquery1.8.3jquery.min.js">
</script>
<script>
$( document ).ready(function() {});
function my_validate_func() {
var pro_serv = $('#pro_serv').val();
if ($('#pro_serv').val() != "" ) {
$.ajax({
type: "POST",
url: 'check.php',
data: { pro_serv: pro_serv},
success: function(response) {
$('#desc').val(response);
$('#unitprice').val(response);
$('#tax').val(response);
}
});
}
}
</script>
</body>
</html>
check.php
<?php
include('database/db.php');
$type=$_POST['pro_serv'];
$sql="Select * from product_service_details where type='$type'";
$result=mysql_query($sql);
if($dtset=mysql_fetch_array($result))
{
$desc=$dtset['desc'];
$unitprice=$dtset['unitprice'];
$tax=$dtset['tax'];
echo $desc;
echo $unitprice;
echo $tax;
}
?>
You need to use json_encode in php and in jquery you need to parse the response like below:
PHP:
<?php
include('database/db.php');
$type=$_POST['pro_serv'];
$sql="Select * from product_service_details where type='$type'";
$result=mysql_query($sql);
if($dtset=mysql_fetch_array($result))
{
echo json_encode($dtset);
}
JQuery:
$.ajax({
type: "POST",
url: 'check.php',
data: { pro_serv: pro_serv},
success: function(response) {
var res = $.parseJSON(response);
$('#desc').val(res.desc);
$('#unitprice').val(res.unitprice );
$('#tax').val(res.tax );
}
});
You can use a separates for separate values then use JS split function.
echo $desc ."-" . $unitprice ."-" .$tax;
In Js
var arr = response.split('-');
$('#desc').val(arr[0]);
$('#unitprice').val(arr[1]);
$('#tax').val(arr[2]);
in check.php
*echo $tax;* should be echo json_encode('tax'=>$tax);
and in index.php
$('#tax').val(response); can be $('#tax').val(response.tax);
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 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);
});
});
});
in www.mpoo.org/organizatori/drugi.php have 2 select list, first time work but other no. This is very similar to this.
Second time Debugger say:
TypeError: $(...) is null
drugi.php:37
var country_id = $("select#drop1 option:selected").attr('value');
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Списак организатора</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
<!--
#import url("stil.css");
-->
</style>
</head>
<body>
<div id="body">
<div class="mhead"><h2>Списак организатора</h2></div>
<div id="dropdowns">
<div id="center" class="cascade">
<label>Одабери претрагу:
<select name="country" id = "drop1">
<option value=""> Одабери...</option>
<option value="Grad"> Град/Општина</option>
<option value="Zanimanje"> Занимање</option>
<option value="Struka"> Струка</option>
<option value="Organizator"> Организатор</option>
<option value="Svi"> Сви организатори</option>
</select>
</label>
</div>
<div class="cascade" id="state"></div>
</div>
<div id="city"> </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select#drop1").change(function(){
var country_id = $("select#drop1 option:selected").attr('value');
// alert(country_id);
$("#state").html( "" );
$("#city").html( "" );
if (country_id.length > 0 ) {
if (country_id=='Svi'){
$.ajax({
type: "POST",
url: "drugi4.php",
data: "country_id="+country_id,
cache: false,
beforeSend: function () {
$('#state').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#state").html( html );
}
});
}
else {
$.ajax({
type: "POST",
url: "drugi2.php",
data: "country_id="+country_id,
cache: false,
beforeSend: function () {
$('#state').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#state").html( html );
}
});
}
}
});
});
</script>
</body>
</html>
This is drugi2.php
<?php
include("connection.php");
//var_dump($_POST);
$state_id = trim(mysqli_escape_string($con, $_POST["country_id"]));
$sql="SELECT DISTINCT $state_id FROM jom_x1_organizatori ORDER BY $state_id";
$count = mysqli_num_rows( mysqli_query($con, $sql) );
if ($count > 0 ) {
mysqli_set_charset($con, "utf8");
$query = mysqli_query($con, $sql);
?>
<label>
<select name="city" id = "drop2">
<option value="">Одабери...</option>
<?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC)) { ?>
<option value="<?php echo $rs[$state_id]; ?>"><?php echo $rs[$state_id]; ?></option>
<?php } ?>
</select>
</label>
<?php
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select#drop2").change(function(){
var state_id = $("select#drop2 option:selected").attr('value')+";"+$("select#drop1 option:selected").attr('value');
// alert(state_id);
if (state_id.length > 0 ) {
$.ajax({
type: "POST",
url: "drugi3.php",
data: "state_id="+state_id,
cache: false,
beforeSend: function () {
$('#city').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#city").html( html );
}
});
} else {
$("#city").html( "" );
}
});
});
</script>
I think after ajax loading its removing the selected option, therefore you should use:
var country_id = $("#drop1").val();
instead of
var country_id = $("select#drop1 option:selected").attr('value');