Reload with drop-down and text fields

Question

BillyMako 0 Newbie Poster

16 Years Ago

[IMG]http://i36.tinypic.com/11rus5g.jpg[/IMG]

So far i have a database with all data in it.
I have the 1st text field where the user enters their postcode and then the page reloads populating the drop down menu with the corresponding suburbs.

Next what i want is after a suburb has been selected in the list, the page reloads again and the corresponding city, state and country is displayed in the other 3 text fields.

How can i get the query to execute and fill in the last 3 fields after a suburb in the drop list has been selected???????

<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>

<title>Postcode and Address Selection Test</title>

<SCRIPT language=JavaScript>
function reload(form)
{
var val=form.postcode.value;
self.location='dd.php?postcode=' + val ;
}

</script>
</head>

<body>
<?
@$postcode=$_GET['postcode']; // Use this line or below line if register_global is off
@$city=$_GET['city']; 
@$state=$_GET['state']; 
@$country=$_GET['country']; 
$city = 'not_complete';
$state = 'not_complete';
$country = 'not_complete';

/////// for suburb drop down list we will check if postcode is entered else we will display all the suburbs///// 
if(isset($postcode) and strlen($postcode) > 0){
$query=mysql_query("SELECT DISTINCT suburb FROM post2 where postcode=$postcode order by suburb"); //Table called POST2
}else{$query2=mysql_query("SELECT DISTINCT suburb FROM post order by suburb"); } 
////////// end of query for second subcategory drop down list box /////////////////////////////////////////////

echo "<form method=post name=f1 action='dd-check.php'>";//Goes to dd-check to check posted variables

//Page Reloads after 4 digits are entered///<<<<--------------POSTCODE FIELD-------<<<<<<<<<<<<<<
echo "Postcode: <input name='postcode' type=text onkeyup=\"if(this.value.length>3)reload(this.form);else return false;\" value=$postcode>";  
echo"<input value='Load Suburbs' type='button' onclick=\"reload(this.form)\" > Click to Load Suburbs for this Postcode.";

//////////////////Starting of suburb drop downlist///<<<<--------------SUBURB-------<<<<<<<<<<<<<
echo"<br><br>";
echo"Suburb: ";
echo "<select name='suburb'><option value=''>Select Suburb</option>"; // onchange=\"reload(this.form)\"
while($pop = mysql_fetch_array($query)) { 
echo  "<option value='$pop[suburb]'>$pop[suburb]</option>";
}//else{
//echo  "<option value='$pop[suburb]'>$pop[suburb]</option>";
//}
echo "</select>";
//////////////////  This will end the suburb drop down list ///////////

///////////////Execute this when suburb is selected////////////////////<<-----NEED TO FIX-------<<<<<<
//if(isset($suburb) and strlen($suburb) > 0){
$query_city=mysql_query("SELECT city FROM post2 where postcode=$postcode AND $suburb=$suburb");
//}else{
//$city = 'not_complete1';
//}
$query_state=mysql_query("SELECT state FROM post2 where postcode=$postcode AND $suburb=$suburb");
$query_country=mysql_query("SELECT country FROM post2 where postcode=$postcode AND $suburb=$suburb");

echo "<br>";
echo "<br>";
echo "City: <input name='city' type=text value=$city>";
echo "<br>";
echo "<br>";
echo "State: <input name='state' type=text value=$state>";
echo "<br>";
echo "<br>";
echo "Country: <input name='country' type=text value=$country>";

//-----------------------------------------------

echo "<br><br><input type=submit value=Submit>";
echo "</form>";
?>
</body>

</html>

Thankyou,
Billy

javascript

3 Contributors
3 Replies
505 Views
9 Months Discussion Span
Latest Post 15 Years Ago Latest Post by itsjareds

itsjareds 29 Junior Poster

15 Years Ago

This is much more easily obtained with AJAX than reloading an entire page. To do this, make a separate ASP file that returns an XML formatted page with information from your MySQL database.

Then, use AJAX to take that XML and add the entries to the select boxes. // Adding a script, will edit.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

EliteViper 0 Newbie Poster · Answer 1 · 2009-05-18T17:35:11+00:00

did you ever get an answer to this post? or figure out a solution, i have a very similar problem ... and am in need of a solution.

itsjareds 29 Junior Poster · Answer 2 · 2009-05-19T05:57:06+00:00

Ok, I wrote the script for getting the values from the database in PHP, but you can probably translate it to ASP. The part we're concerned about is the JavaScript.

I didn't have a database to load data from, so I used arrays instead. As I said before, this is a demo, so you'll have to load the data from the database differently. The XML file will display the same.

A demo page can be found here. I don't guarantee that this will stay up forever.

Here's my finished product: demo.html:

<html>
<head>
	<title>AJAX Location Script</title>

	<script type="text/javascript" src="ajaxloc.js">
	// Script created by KnifeySpooney (http://wurbo.com)
	// This script is free to use and modify.
	</script>
</head>
<body onLoad="getLocation('suburb')" style="text-align:center;">

Suburb: <select name="suburb" onChange="if (this.value != '') getLocation('location', this.value); else clearLocations();">
	<option value="">- Choose your suburb -</option>
</select>
<br/>
State: <input type="text" name="state"/>
<br/>
Country: <input type="text" name="country"/>

</body>
</html>

locations.php

<?php

$suburbs = array('Evergreen Terrace',
		 'Quahog',
		 'South Park',
		 'Raleigh');

$states[array_search('Evergreen Terrace', $suburbs)] = 'Illinois';
$states[array_search('Quahog', $suburbs)] = 'Maryland';
$states[array_search('South Park', $suburbs)] = 'Colorado';
$states[array_search('Raleigh', $suburbs)] = 'North Carolina';

$countries[array_search('Evergreen Terrace', $suburbs)] = 'United States';
$countries[array_search('Quahog', $suburbs)] = 'United States';
$countries[array_search('South Park', $suburbs)] = 'United States';
$countries[array_search('Raleigh', $suburbs)] = 'United States';

$type = $_REQUEST['type'];

if ($type) {
	header("Content-Type: text/xml");

	echo "<?xml version='1.0' encoding='ISO-8859-1'?>\n";
	echo "<location>\n";

	if ($type == 'suburb') {
		for ($i=0; $i<sizeof($suburbs); $i++) {
			echo "\t<place type='suburb'>" . $suburbs[$i] . "</place>\n";
		}
	}

	else if ($type == 'location' && $_REQUEST['loc']) {
		echo "\t<place type='state'>" . $states[array_search($_REQUEST['loc'], $suburbs)] . "</place>\n";
		echo "\t<place type='country'>" . $countries[array_search($_REQUEST['loc'], $suburbs)] . "</place>\n";
	}

	else
		echo "\t<place>Not all variables specified.</place>\n";

	echo "</location>";
}

else {
	header("Content-Type: text/html");
	echo "<h1>Error: Please enter a type of location to load.</h1>";
}

?>

ajaxloc.js

function getLocation(type, where) {
	var xmlhttp;

	if (window.XMLHttpRequest)
		xmlhttp = new XMLHttpRequest();
	else if (window.ActiveXObject)
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	else
		alert("Your browser does not support XMLHTTP!");

	xmlhttp.onreadystatechange = function() {
		if(xmlhttp.readyState == 4) {
			var xmlDoc = xmlhttp.responseXML.documentElement;
			var loc = xmlDoc.getElementsByTagName("place");

			if (type == "suburb") {
				for (var a=0; a<loc.length; a++) {
					var locVal = loc[a].childNodes[0].nodeValue;
					var elm = document.createElement("option");
					elm.value = locVal;
					elm.innerHTML = locVal;
					document.getElementsByName(type)[0].appendChild(elm);
				}
			}
			else {
				for (var b=0; b<loc.length; b++) {
					var id = loc[b].attributes.getNamedItem("type").value;
					document.getElementsByName(id)[0].value = loc[b].childNodes[0].nodeValue;
				}
			}
 		}
	}
	xmlhttp.open("GET", "locations.php?type=" + type + "&loc=" + where, true);
	xmlhttp.send(null);
}
function clearLocations() {
	document.getElementsByName("state")[0].value = "";
	document.getElementsByName("country")[0].value = "";
}