I have a page called index.php,where in menu i have to select city based on city i have to show area names in auto suggetions.here i'm storing dropdown city list id in a as follows:
now my theme is i have to pass jquery value to autocomplete.php page
index.php:
<select class="form-control" name="city" id="city">
<option value=''>Select city</option>
<?php while($row=mysql_fetch_array($result)) { ?>
<option value="value="<?php echo $row['CITY_ID']; ?>"><?echo $row['CITY_TITLE']?></option>
<?php } ?>
</select>
searchget.js(included in index.php):
$("#city").change(function() {
var city_id=$('#city').val();
alert(city_id);
$.ajax({
url: "autocompleteloc.php",
type: "POST",
data: { city_id1: city_id},
success: function (result) {
alert('success');
CallSearch();
}
});
});
autocomplete.php:
this page have areas code :now that city id which is in jquery variable i have to pass in this page,
<?php
ini_set("display_errors",1);
include("config.php");
$q=$_POST['search'];
$cid=$_REQUEST['city1'];
$my_data=mysql_real_escape_string($q);
echo $sql="SELECT DISTINCT UNIT_AREA,CITY_ID FROM UNIT WHERE UNIT_AREA LIKE '%$my_data%' and CITY_ID='$cid'";
$result = mysql_query($sql) or die(mysql_error());
if($result)
{
while($row=mysql_fetch_array($result))
{
echo $row['UNIT_AREA']."\n";
}
}
?>
You can have value in php which you pass in ajax param
data: { CITY_ID1: CITY_ID},
So, in php you can get value as
$_POST['CITY_ID1']
You should learn ajax post with PHP.
Related
This code comes from a guide I've seen in YouTube.
I'm trying to populate the second dropdown based on the choices on the first dropdown, in my test page its working, however when I tried to attach it to my main page, the second dropdown is not turning into a dropdown.
I've tried to re-code it, but still the problem persist.
This is for the AJAX
<?php
include('db.php');
if($_POST['id']){
$id=$_POST['id'];
if($id==0){
echo "<option value='0'>Select Type</option>";
}else{
$sql = mysqli_query($con,"SELECT * FROM `ConcernType` WHERE Concern_Id='$id'");
while($row = mysqli_fetch_array($sql)){
echo '<option value="'.$row['ConcernType_id'].'">'.$row['ConcernType_name'].'</option>';
}
}
}
?>
This is for the index.php
<label>Concern Category :</label><select name="concerncategory" class="concerncategory">
<option value="0">Select Category</option>
<?php
include('db.php');
$sql = mysqli_query($con,"select * from ConcernCategory");
while($row=mysqli_fetch_array($sql))
{
echo '<option value="'.$row['Concern_Id'].'">'.$row['ConcernCategory_name'].'</option>';
} ?>
</select><br/><br/>
<label>Concern Type :</label><select name="concerntype" class="concerntype">
<option value="0">Select Type</option>
</select>
<br /><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".concerncategory").change(function()
{
var Concern_Id=$(this).val();
var post_id = 'id='+ Concern_Id;
$.ajax ({
type: "POST", url: "ajax.php", data: post_id, cache: false,
success: function(Type) {
$(".concerntype").html(Type);
} }); }); });
</script>
Here are some screenshots.
https://ibb.co/2NTTdG8
https://ibb.co/fFXBzFS
On my web page I have two dropdown menus. One for a list of countries and another for a list of city's. The country menu is populated with data from a database. Once one of these countries are selected, the following dropdown is populated with corresponding cities via a php file (getdata.php) which takes the country value selected and queries it with a database and echos the city names into the dropdown. What I am struggling to work out is, when a city is selected, how would I get the text of the city selection and use this text in another php (displayCity.php) to query the database and echo values such as Population into the textbox (without reloading page) back on the web page? Would I need to make the displayCity.php similar to the getData.php? I have already created a new Ajax method for the textbox but I am not sure if I will need this. Advice would be greatly appreciated.
<?php include_once "connection.php"; ?>
<!DOCTYPE html>
<html>
<head>
<title>City displayer</title>
<h1>City displayer</h1>
<link rel="stylesheet" type="text/css" href="homepagestyle.css">
</head>
<body>
<div class = "country">
<label>Select Country: </label>
<select name="country" onchange="getId(this.value);">
<option value = "">Select Country</option>
<?php
$query = "SELECT DISTINCT(Country) from location AS Country FROM location ORDER BY Country ASC;";
$results = mysqli_query($con, $query);
foreach ($results as $country) {
?>
<option value = "<?php echo $country['Country']; ?>"><?php echo $country['Country'] ?></option>
<?php
}
?>
</select>
</div>
</br>
</br>
<div class="city">
<label>Select a City: </label>
<select name="city" id="cityList" onchange="showCity(this.value)">
<option value="">Select a city</option>
</select>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
function getId(value){
$.ajax({
type: "POST",
url: "getdata.php",
data: "Country="+value,
success: function(data){
$("#cityList").html(data);
}
});
}
</script>
</br>
<div id = "textbox">Choose a country and city to display city name here</div>
<script>
function showCity(value){
$.ajax({
type: "POST",
url: "displayCity.php",
data: "City="+value,
success: function(data){
$("#textbox").html(data);
}
});
}
</script>
</body>
</html>
getdata.php
<?php
include_once "connection.php";
if(!empty($_POST['Country'])){
$country = $_POST['Country'];
$query = "SELECT * FROM location WHERE Country= '$country'";
$results = mysqli_query($con, $query);
foreach ($results as $city) {
?>
<option value = "<?php echo $city['Country']; ?>"><?php echo
$city['City'] ?></option>
<?php
}
}
?>
Use AJAX along with a $_SESSION variable. No need to write it to the database. You just have to make sure you use session_start() everywhere you need it.
I am banging my head against a wall with this now so any help will go a long way with this one.
I am trying to get some data from a drop down list and update a database with the data selected.
This is my drop down list:
<form method="post" data-remote="true">
<select class="selectpicker" data-live-search="true" name="status[]">
<?php while($test3 = sqlsrv_fetch_array($test2, SQLSRV_FETCH_ASSOC)) : ?>
<option data-tokens="<?php echo $test3['Name']; ?>" value="<?php echo $test3['Name']; ?>">
</option
<?php endwhile; ?>
</select>
View Area
This is my ajax:
$(document).on('click', '#sim-area', function() {
$.ajax({
type: "POST",
url: 'sim-area.php',
data: {changeStatus: status},
success: function() {
"area switched"
}
});
});
and this is my page that is updating the databse (sim-area.php):
<?php
$userID = $user['userID'];
$selectedArea = $_GET['changeStatus'];
$queryAreaName = "
SELECT UserID, Name, U_NB, U_RTN
FROM Table
WHERE UserID = '$userID' AND Name = '$selectedArea'";
$getAreaname = sqlsrv_query($sapconn2, $queryAreaName);
$areaSwitch = sqlsrv_fetch_array($getAreaname, SQLSRV_FETCH_ASSOC);
$areaNB = $test2['U_NB'];
$areaRTN = $test2['U_RTN'];
//UPDATE TABLE
?>
No matter what I try I get an undefined error, I have changed it to hard code the values and in inserts fine, so I know everything is working fine, It just isn't passing the data through
Looks you are not passing data correctly to ajax call.
Below is updated code for dropdown (changed name of select and added id attribute):
<form method="post" data-remote="true">
<select class="selectpicker" data-live-search="true" name="status" id="changeStatus">
<?php while($test3 = sqlsrv_fetch_array($test2, SQLSRV_FETCH_ASSOC)) : ?>
<option data-tokens="<?php echo $test3['Name']; ?>" value="<?php echo $test3['Name']; ?>">
</option
<?php endwhile; ?>
</select>
Updated code for jquery (changed code for passing value of data):
$(document).on('click', '#sim-area', function() {
$.ajax({
type: "POST",
url: 'sim-area.php',
data: {changeStatus: $('#changeStatus').val()},
success: function() {
"area switched"
}
});
});
Actually I am developing one website where i want to assign orders to delivery staff and area or bakers from where he will pick up the delivery material.
Above picture shows area name and bakers from where delivery staff will pickup the delivery material. So for each order (row) i want to create 2 List Boxes and depending on selection of 1st listbox i want to change the content of 2nd listbox.
<select name="<?phpecho $CurrentOrders->comment_ID; ?>" id="courseid" style="width:100%;">
<option value="">-----Select Pick Up Area----</option>
<?php
$Area = DB::table('area')
->get();
foreach ($Area as $Area) {
?>
<option id="<?php echo $Area->area_id; ?>" value="<?php echo $Area->area_name; ?>"><?php $Area->area_name; ?></option>
<?php } ?>
</select>
</td>
Above code is to create dynamically listboxes.
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#1").change(function () {
var id = $(this).val();
var dataString = 'id=' + id;
//alert(dataString);
$.ajax({
type: "POST",
url: "ajax_section.php",
//data: dataString,
data: {'id': id},
success: function (html){
$("#sectionid").html(html);
},
error: function () {
alert('Error');
}
});
});
});
</script>
Above script is to create the content of 2nd listboc based on selection of 1st listbox.
<?php
if($_POST['id']) {
$id=$_POST['id'];
$sql=DB::table('vendors')
->where('vendors_area','=',$id)
->get();
$count=0;
foreach($sql as $sql) {
$count++;
}
if ($count > 0) {
echo "<option selected='selected'>---- Select Section Name ---- </option>";
foreach($sql as $sql) {
$id=$sql->vendors_id;
$data=$sql->vendors_name;
echo '<option value="'.$id.'">'.$data.'</option>';
}
}
}
?>
And above code is to create and show the content of 2nd listbox based on selection of 1st.
But all this codes are working for only 1 listbox. It is not working dynamically Even if have changed written scripts for all listboxws as i written for 1st listbox(as #1).
please help me out.
You need to change
$("#1").change(function ()
to
$(document).on('change',"#1",function()
in your javascript code
Excuse me if i've got the terms wrong as i'm new to development, but I have a multiple dropdown menu's linked so that the results from the the previous menu determine what the next menu will populate the next.
i.e. if i select uk, the next list will show, London, If i select Spain, the next list will show Madrid
My dropdown menus are getting populated by mysql, this is fine but how do i link them up without calling on another page
Here's an example of what HTML i have:
<div id="container">
<h3>Price List</h3>
<form method="post" action="" name="form1">
<?
include 'classes.php';
$query="SELECT * FROM Sex_Table";
$result=mysql_query($query);
?>
<div id="select-1">
<select class="calculate" name="sdf" onChange="getClothing(this.value)">
<option value="0">Please Select</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value=<?=$row['Price']?> sex_price="<?=$row['Price']?>"><?=$row['Sex_Name']?> (£<?=$row['Price']?>)</option>
<? } ?>
</select>
</div>
<?
$Sex=intval($_GET['Sex_var']);
include 'classes.php';
$query="SELECT * FROM Clothing_Table WHERE Sex_Table_ID='$Sex'";
$result=mysql_query($query);
?>
<div id="select-2">
<select class="calculate" name="sdf" onChange="">
<option value="0">Please Select</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value=<?=$row['Price']?> sex_price="<?=$row['Price']?>"><?=$row['Clothing_Name']?> (£<?=$row['Price']?>)</option>
<? } ?>
</select>
</div>
</form>
You'll notice that on change calls on "getClothing(this.value)"
Here is that js:
function getClothing(Sex_Table_ID) {
$.ajax({
type: "get",
url: "findClothing.php",
data: { Sex_var: Sex_Table_ID },
error: function(error) { alert('System error, please try again.'); },
success: function(data){ //data is the response from the called file
$("#select-2").html(data); //this changes the contents of the div to data that was returned
}
});
}
I need it so that it doesn't call on url: "findClothing.php", as once it does this, my price no longer calculates.
I'm sure i don't really need to show this part but just incase, here's what calculates my price:
$(function(){
$('.calculate').change(function() {
var total = 0;
$('.calculate').each(function() {
if($(this).val() != 0) {
total += parseFloat($(this).val());
}
});
$('#total').text('£' + total.toFixed(2));
});
});//]]>
Are you sure your ajax data contains option tag with price as a value?
Also change:
$('.calculate').change(function() {
with
$(".calculate").live("change", function(){