two dropdowns connected using PHP, AJAX, Javascript and postgresql - javascript

I have my index.php file which load all the countries correctly as seen in this image:
Also this is what I've seen in the first load:
<div class="content">
<?php
include("config.php");
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="country" id="country">
<option value="">Select Country</option>
<?php
$db = pg_connect("$db_host $db_name $db_username $db_password");
$query = "SELECT country FROM countries";
$result = pg_query($query);
if (!$result) {
echo "Problem with query " . $query . "<br/>";
echo pg_last_error();
exit();
}
while($myrow = pg_fetch_assoc($result)) {
printf ("<option value=$myrow[country_id]>$myrow[country]</option>");
}
?>
</select>
<br>
<select name="state" id="state">
<option value="">Select State</option>
</select>
<br>
<select name="city" id="city">
<option value="">Select City</option>
</select>
<script type="text/javascript">
$(document).ready(function(){
$('#country').on('change',function(){
var countryID = $(this).val();
if(countryID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'country_id='+countryID,
success:function(html){
$('#state').html(html);
$('#city').html('<option value="">Select state first</option>');
}
});
}else{
$('#state').html('<option value="">Select country first</option>');
$('#city').html('<option value="">Select state first</option>');
}
});
$('#state').on('change',function(){
var stateID = $(this).val();
if(stateID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'state_id='+stateID,
success:function(html){
$('#city').html(html);
}
});
}else{
$('#city').html('<option value="">Select state first</option>');
}
});
});
</script>
Then I have the ajaxData.php file as below:
<?php
//Include database configuration file
include("config.php");
if(isset($_POST["country_id"]) && !empty($_POST["country_id"])){
//Get all state data
$query = "SELECT state FROM states WHERE country = ".$_POST['country_id'];
$result = pg_query($query);
if (!$result) {
echo "Problem with query " . $query . "<br/>";
echo pg_last_error();
exit();
}
//Count total number of rows
$get_total_rows = pg_numrows($results);
//Display states list
if($get_total_rows > 0){
echo '<option value="">Select state</option>';
while($myrow = pg_fetch_assoc($result)) {
echo '<option value="'.$myrow['state_id'].'">'.$myrow['state'].'</option>';
}
}else{
echo '<option value="">State not available</option>';
}
}
Once I select the country I see the following:
Since the text in the selectors has changed from "Select a State" to "Select country first", it seams that in my javascript funtion when $('#country').on('change',function() is getting into
else{
$('#state').html('<option value="">Select country first</option>');
$('#city').html('<option value="">Select state first</option>');
Instead of going through:
if(countryID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'country_id='+countryID,
success:function(html){
$('#state').html(html);
$('#city').html('<option value="">Select state first</option>');
}
});
There is obviously something that is not working but I'm not able to see what it is.
Any help would be appreciated.

Related

Show Hide label based on select drop down values

I want to Hide and Show the "City" label.
Show only if I choose specific "State" if not hide it again.
Country=USA> State=Texas> Show the City label.
Country=USA> State=New York> Hide the City label
$(document).ready(function() {
// Country dependent ajax
$("#country").on("change", function() {
var countryId = $(this).val();
$.ajax({
url: "action.php",
type: "POST",
cache: false,
data: {
countryId: countryId
},
success: function(data) {
$("#state").html(data);
$('#city').html('<option value="">Select city</option>');
}
});
});
// state dependent ajax
$("#state").on("change", function() {
var stateId = $(this).val();
$.ajax({
url: "action.php",
type: "POST",
cache: false,
data: {
stateId: stateId
},
success: function(data) {
$("#city").html(data);
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
<div class="col-md-4">
<!-- Country dropdown -->
<label for="country">Country</label>
<select class="form-control" id="country">
<option value="">Select Country</option>
<?php
$query = "SELECT * FROM countries";
$result = $con->query($query);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo '<option value="'.$row['id'].'">'.$row['country_name'].'</option>';
}
}else{
echo '<option value="">Country not available</option>';
}
?>
</select>
<br />
<!-- State dropdown -->
<label for="country">State</label>
<select class="form-control" id="state">
<option value="">Select State</option>
</select>
<br />
<!-- City dropdown -->
<label for="country">City</label>
<select class="form-control" id="city">
<option value="">Select City</option>
</select>
</div>
</form>
</div>
Action.php
<?php
// Include the database connection file
include('db_config.php');
if (isset($_POST['countryId']) && !empty($_POST['countryId'])) {
// Fetch state name base on country id
$query = "SELECT * FROM states WHERE country_id = ".$_POST['countryId'];
$result = $con->query($query);
if ($result->num_rows > 0) {
echo '<option value="">Select State</option>';
while ($row = $result->fetch_assoc()) {
echo '<option value="'.$row['id'].'">'.$row['state_name'].'</option>';
}
} else {
echo '<option value="">State not available</option>';
}
} elseif(isset($_POST['stateId']) && !empty($_POST['stateId'])) {
// Fetch city name base on state id
$query = "SELECT * FROM cities WHERE state_id = ".$_POST['stateId'];
$result = $con->query($query);
if ($result->num_rows > 0) {
echo '<option value="">Select city</option>';
while ($row = $result->fetch_assoc()) {
echo '<option value="'.$row['id'].'">'.$row['city_name'].'</option>';
}
} else {
echo '<option value="">City not available</option>';
}
}
?>
try to add a condition inside the success callback function of the state dependent ajax request
success: function(data) {
$("#city").html(data);
if ($("#state").val() === "Texas") {
$("#city").parent().prev("label[for='country']").show();
} else {
$("#city").parent().prev("label[for='country']").hide();
}
}
It would be easier if the label was wrapping the select or the label and select was inside a div but here you are
You could just test the state since I expect you do not have other countries with a state called Texas
This goes anywhere
$("form").on("change", "select", function() {
const country = $("#country").val();
const state = $("#state").val();
const show = country === "USA" && state === "Texas";
$("$city").toggle(show);
$("$city").prev().toggle(show); // label
})

How to get multiple data from select item in jquery

I am trying to get multiple value from multiple select textbox and use the same value in PHP for adding the SUM.
My code is:
function get_amount() {
var x = $('#work').val();;
alert(x);
$.ajax({
type: "POST",
url: "get-sum.php",
data: 'id=' + x,
success: function(data) {
alert(data);
//$('#html').load(document.URL + ' #html');
}
});
}
<select class="select2 select2-multiple" multiple="multiple" data-placeholder="Choose" name="work[]" id="work" onchange="get_amount()">
<option value="1" >option 1</option>
<option value="2"> OPtion 2 </option>
<option value="3"> OPtion 3</option>
</select>
And My php file as :
$id = $_POST['id'];
function getAmount($id){
global $mysqli;
$stmt = $mysqli->prepare("SELECT
(amount)
FROM work
WHERE id = ?
");
$stmt->bind_param("s",$id);
$stmt->execute();
$stmt->bind_result($amount);
$stmt->store_result();
$stmt->fetch();
$stmt->close();
return $amount;
}
$sql = getAmount($id);
echo $sql;
Error which i am getting is the data which i am getting from multiple select is like 5,6,7 and its always hitting the php file at id 5. And the second problem how i will be able to add all $sql data.
I have done some changes in my PHP code :
$id = $_POST['id'];
$sum = 0;
for($i = 0; $i<count($id); $i++) {
$sum = $sum + getAmount($id[$i]);
}
echo $sum;
function getAmount(&$id){
global $mysqli;
$stmt = $mysqli->prepare("SELECT SUM(amount) AS total FROM work WHERE id = (?)");
$stmt->bind_param("s",$id);
$stmt->execute();
$stmt->bind_result($amount);
$stmt->fetch();
return $amount['total'];
}

Character data is not passing from php to jquery

Html file
The values for the sub combobox is retrieved by a php select query and the values are characters.
i have tried with integers values are perfectly passed.
<select name="sub" id="sub">
<option value="">Select semester first</option>
</select>
<select name="staff" id="staff">
<option value="">Select sub first</option>
</select>
Javascript
$('#sub').on('change',function(){
var SUB = $(this).val();
if(1){
$.ajax({
type:'POST',
url:'sta.php',
data:'sub='+SUB,//character is not passing.
success:function(html){
$('#staff').html(html);
}
});
}else{
$('#staff').html('<option value="">Select sub first</option>');
}
});
php file
if(isset($_POST["sub"]) && !empty($_POST["sub"]))
{
//Get all city data
$query = mysql_query("SELECT staff_name FROM subject WHERE course_name = ".$_POST['sub']);
//Count total number of rows
$rowCount = mysql_num_rows($query);//It always shows 0
//Display cities list
if($rowCount > 0){
echo '<option value="">Select staff</option>';
while($row = mysql_fetch_assoc($query)){
echo '<option value='.$row['staff_name'].'>'.$row['staff_name'].'</option>';
}
}else{
echo '<option value="">staff not available</option>';//when i tried to execute it comes here
}
}
There is simple syntactical error in your query in php just rewrite it as:
$query = mysql_query("SELECT staff_name FROM subject WHERE course_name = '".$_POST['sub']."'");
wherever you pass the data other than numbers always use single inverted comma such as'myData' to surround the values.

JQuery Dynamic Option Select Issue

This is the continution of this Question
Here is the Code for Dynamic JQuery Option Select Generator.
First i will choose the Country, which i didn't include the code, it will return the CountryID which is passed to the controller, then RegionID, then CityID. IT works well until generating the CityID Option select Menu, while i move to the AreaID it didn't work.
What i am missing and how can i fix that ?
I can't able to generate the Menu after the third Second One.
Here is the HTML :
<div id='result' name="result">
<select id="name">
<option value="" disabled>Please select above</option>
</select>
</div>
<div id='resulta' name="resulta">
<select id="name">
<option value="" disabled>Please select above</option>
</select>
</div>
<div id='resultb' name="resultb">
<select id="name">
<option value="" disabled>Please select above</option>
</select>
Here is my Script :
<script>
var ab = $.noConflict();
ab(document).ready(function() {
ab(document).on("change", "#CountryID", function() {
var CountryID = ab("#CountryID").val();
ab.post("globalregiongenerator", {
CountryID: CountryID
},
function(data) {
ab("#result").html(data);
});
});
});
</script>
<script>
var ac = $.noConflict();
ac(document).ready(function() {
ac(document).on("change", "#RegionName", function() {
var RegionName = ac("#RegionName").val();
ac.post("globalcitygenerator", {
RegionName: RegionName
},
function(data) {
ac("#resulta").html(data);
});
});
});
</script>
<script>
var ad = $.noConflict();
ad(document).ready(function() {
ad(document).on("change", "#CityName", function() {
var CityName = ad("#CityName").val();
ad.post("globalareagenerator", {
CityName: CityName
},
function(data) {
ad("#resultb").html(data);
});
});
});
</script>
And here is the Server Side :
public function globalregiongenerator()
{
$CountryID = Input::get('CountryID');
$result = DB::select("SELECT * FROM region where CountryID =$CountryID");
echo "<select id='RegionName' name='RegionName'> <option value='' id=''>Select the Area</option>";
foreach ($result as $value)
{
echo "<option value=".$value->RegionID.">".$value->RegionName."</option>";
}
echo "</select>";
}
public function globalcitygenerator()
{
$RegionID = Input::get('RegionName');
$result = DB::select("SELECT * FROM city where RegionID =$RegionID");
echo "<select id='CityName' name='CityName'> <option value='' id=''>Select the Area</option>";
foreach ($result as $value)
{
echo "<option value=".$value->CityID.">".$value->CityName."</option>";
}
echo "</select>";
}
public function globalareagenerator()
{
$CityID = Input::get('CityName');
$result = DB::select("SELECT * FROM area where CityID =$CityID");
echo "<select id='CityName' name='CityName'> <option value='' id=''>Select the Area</option>";
foreach ($result as $value)
{
echo "<option value=".$value->CityID.">".$value->CityName."</option>";
}
echo "</select>";
}
Note :
Uncaught TypeError: undefined is not a function
This is the error i got in console
Change
echo "<option value=".$value->CityID.">".$value->CityName."</option>";
to
echo "<option value='".$value->CityID."'>".$value->CityName."</option>";
Same with other echos. You're generating
<option value=united states>United States</option>
but it needs to be
<option value='united states'>United States</option>
Update:
Change them to
echo "<option value=\"".$value->CityID."\">".$value->CityName."</option>";

Values Are Combining

`I have a script that is returning the right values except for one little problem. Lid is returning 892 which is right, However; Cid which should return 16 its returning 89216 a combination of the two. How can I get Cid to just return 16?
$(document).ready(function()
{
$(".Doggie").change(function()
{
var LocationString ='Lid='+ $(this).val();
$.ajax({
type: "POST",
url: "ajax_city.php",
data: LocationString,
cache: false,
success: function (html) {
$(".Kitty").html(html);
}
});
});
$('.Kitty').live("change",function(){
var Lid = $('#Doggie').val(), // This is the value of the id="Doggie" selected option
Cid = $(this).val(); // This is the value of the id="Kitty" selected option
$.ajax({
type: "POST",
url: "ajax_area.php",
data: {"Lid":Lid,"Cid":Cid},
cache: false,
success: function (html) {
$(".Pig").html(html);
}
});
});
});
</script>
</head>
<body>
<div id="frame1">
<label>Place :</label>
<select name="Doggie" class="Doggie" id="Doggie">
<option selected="selected">--Select Place--</option>
<?php
$sql = mysql_query("SELECT tblLocations.RestID as Lid, tblRestaurants.RestName as name
FROM tblRestaurants INNER JOIN tblLocations ON tblRestaurants.RestID = tblLocations.RestID
GROUP BY tblLocations.RestID, tblRestaurants.RestName
ORDER BY tblRestaurants.RestName ASC");
while($row=mysql_fetch_array($sql))
{
echo '<option value="'.$row['Lid'].'">'.$row['name'].'</option>';
} ?>
</select>
<label>City :</label>
<select name="Kitty" class="Kitty" id="Kitty">
<option selected="selected">--Select City--</option>
</select>
<label>Area: :</label>
<select name="Pig" class="Pig" id="Pig">
<option selected="selected">--Select Area--</option>
</select>
</div>
</body>
</html>
ajax_city.php
<?php
require('config.php');
if($_POST['Lid'])
{
$Lid=$_POST['Lid'];
//$Cid=$_POST['Cid'];
$sql=mysql_query("SELECT tblLocations.RestId as Lid, tblLocations.CityID as Cid, tblCities.CityName as name
FROM tblLocations INNER JOIN tblCities ON tblLocations.CityID = tblCities.CityID
WHERE tblLocations.RestID = $Lid
GROUP BY tblLocations.RestID, tblCities.CityName
ORDER BY tblCities.CityName ASC");
echo '<option selected="selected">--Select City--</option>';
while($row=mysql_fetch_array($sql))
{
echo '<option value="'.$row['Lid'].''.$row['Cid'].'">'.$row['name'].'</option>';
}
}
?>
ajax_area.php
<?php
require('config.php');
if($_POST['Lid'])
{
//$Lid=$_POST['Lid'];
$Cid=$_POST['Cid'];
$sql=mysql_query("SELECT tblLocations.RestId as Lid, tblLocations.CityID as Cid, tblAreas.AreaName as name
FROM tblLocations INNER JOIN tblAreas ON tblLocations.AreaID = tblAreas.AreaID
WHERE tblLocations.RestID = $Lid AND tblLocations.CityID = $Cid
GROUP BY tblLocations.RestID, tblAreas.AreaName
ORDER BY tblAreas.AreaName ASC");
echo '<option selected="selected">--Select Area--</option>';
while($row=mysql_fetch_array($sql))
{
echo '<option value="'.$row['Lid'].''.$row['Cid'].'">'.$row['name'].'</option>';
}
}
?>
It was these two lines in the ajax-city.php file.
"SELECT tblLocations.CityId as Cid, tblCities.CityName as name
And
echo '<option value="'.$row['Cid'].'">'.$row['name'].'</option>';

Categories