I have two drop downs. when I select the first one . The second one should be populated from the database based on the value selected of the first one. I don't want submit and then get the value , so basically no page refresh.Do I need jquery and Ajax for this?
You don't need jquery, but it makes ajax much easier!
Also, you don't need ajax, but you would have to load the entire database for the second combo on the initial page load if you don't use it.
You don't need jQuery, nor AJAX for that matter if you already have the data on the page.
But, using AJAX is recommended if you have a large amount of data.
though jQuery and AJAX aren't strictly required, they are if you want to do this quickly and in a way that future developers know what's going on. the first drop-down should fire onChange to pull the contents of the second drop-down via AJAX in a JSON list and auto-populate the second drop-down.
Aditya...see if this AJAX Triple DropDown will be some help to you as it has been a learning tutorial for me (Jason Kraft - info@inks-etc.org). I am still learning with AJAX, and beginning to learn with JQUERY, so my ball game is NOT over.
ajax_statecity_index.php
<html>
<head>
<title>Inks Etc. Triple Ajax Dropdown List</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
// Inks Etc. Ajax dropdown code with php
// Roshan Bhattarai - nepaliboy007@yahoo.com
// If you have any problem contact me at http://roshanbh.com.np
function getXMLHTTP() { //function to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getState(country_ID) {
<!--?country= comes from the table "country" not the column "country_name"--
>
var strURL="../AJAX/ajax_findstate.php?country="+country_ID; //+country_ID
is a column from the Table: states
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('statediv').innerHTML=req.responseText;
//alert("Selected Country")
} else {
alert("There was a problem while using
XMLHTTP:
" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getCity(country_ID,state_ID) {
//?country= comes from the table name of "country" not the column name
"country_name"
var strURL="../AJAX/ajax_findcity.php?
country="+country_ID+"&states="+state_ID;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('citydiv').innerHTML=req.responseText;
//alert("Selected State");
} else {
alert("There was a problem while using
XMLHTTP:
" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
</head>
<body>
<form method="post" action="" name="form1">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Country</td>
<td width="150">
<select name="country" onChange="getState(this.value)">
<option value="">Select Country</option>
<option value="1">USA</option>
<option value="2">Canada</option>
<!--<option value="3">Brother</option>
<option value="4">Canon</option>
<option value="5">Dell</option>
<option value="6">Epson</option>
<option value="7">HP</option>
<option value="8">Lexmark</option> -->
</select>
</td>
</tr>
<tr style="">
<td>State</td>
<td>
<div id="statediv">
<select name="states">
<option>Select State</option>
</select>
</div>
</td>
</tr>
<tr style="">
<td>City</td>
<td>
<div id="citydiv">
<select name="cities">
<option>Select City</option>
</select>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
**ajax_findstate.php**
<?php
//the $_GET name of country is the dbtable name
$country=intval($_GET['country']);
include "../SearchEngine/dbc_work2014.php";<!--this is where I keep my phpmyadmin entry
of dbname, dbpass, dbhost, dblocal and save it in a separate file so include in any
file -->
$query="SELECT `id`,`state_name`, `country_ID` FROM states WHERE country_ID='$country'";
$result=mysqli_query($dbc,$query) or die(mysqli_error($dbc));
?>
<select name="states" onchange="getCity(<?=$country?>,this.value)">
<option>Select State</option>
<?
while($row=mysqli_fetch_array($result))
{
?>
<option value=<?=$row['id']?>>
<?=$row['state_name']?>
</option>
<?
}
?>
</select>
**ajax_findcity.php**
<?php
session_start();
//echo "{$_SESSION['username']}";
?>
<?php
$countryId=intval($_GET['country']);
$stateId=intval($_GET['states']);
include "../SearchEngine/dbc_work2014.php";
//$_SESSION['username'] = $username;// which is $_POST['username']
//$_SESSION['password'] = $password;// which is $_POST['password']
$query="SELECT `id`,`city_name` FROM cities WHERE country_ID='$countryId' AND
state_ID='$stateId'";
$result=mysqli_query($dbc, $query)or die(mysqli_error($dbc));
//$sql = "UPDATE `SignUp` SET `Tampa` WHERE `id`='1'";
//echo $sql;
?>
<select name="cities">
<option>Select City</option>
<?php
while($row=mysqli_fetch_array($result))
{
?>
<option value><?=$row['city_name']?></option>
<? }
?>
</select>
Place 3 Tables in a phpmyadmin database:
Table: Country
id_country country_name
1 USA
2 Canada
3 India
Table: State
id_state state_name id_country
1 Florida
2 Quebec
3 Maharashtra
Table: City
id_city city_name id_state id_country
1 Sarasota 1 1
2 Montreal 2 2
3 Mumbai 3 3
Any questions email Jason Kraft a text...but I am far from being near perfect in fact I
feel quite elementary with all that I need to know.
Good Luck...Aditya