JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Reload with drop-down and text fields

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Jan 2008
Posts: 16
Reputation: BillyMako is an unknown quantity at this point 
Solved Threads: 0
BillyMako BillyMako is offline Offline
Newbie Poster

Reload with drop-down and text fields

 
0
  #1
Aug 7th, 2008


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???????

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!doctype html public "-//w3c//dtd html 3.2//en">
  2.  
  3. <html>
  4.  
  5. <head>
  6.  
  7. <title>Postcode and Address Selection Test</title>
  8.  
  9. <SCRIPT language=JavaScript>
  10. function reload(form)
  11. {
  12. var val=form.postcode.value;
  13. self.location='dd.php?postcode=' + val ;
  14. }
  15.  
  16. </script>
  17. </head>
  18.  
  19. <body>
  20. <?
  21. @$postcode=$_GET['postcode']; // Use this line or below line if register_global is off
  22. @$city=$_GET['city']; 
  23. @$state=$_GET['state']; 
  24. @$country=$_GET['country']; 
  25. $city = 'not_complete';
  26. $state = 'not_complete';
  27. $country = 'not_complete';
  28.  
  29. /////// for suburb drop down list we will check if postcode is entered else we will display all the suburbs///// 
  30. if(isset($postcode) and strlen($postcode) > 0){
  31. $query=mysql_query("SELECT DISTINCT suburb FROM post2 where postcode=$postcode order by suburb"); //Table called POST2
  32. }else{$query2=mysql_query("SELECT DISTINCT suburb FROM post order by suburb"); } 
  33. ////////// end of query for second subcategory drop down list box /////////////////////////////////////////////
  34.  
  35. echo "<form method=post name=f1 action='dd-check.php'>";//Goes to dd-check to check posted variables
  36.  
  37. //Page Reloads after 4 digits are entered///<<<<--------------POSTCODE FIELD-------<<<<<<<<<<<<<<
  38. echo "Postcode: <input name='postcode' type=text onkeyup=\"if(this.value.length>3)reload(this.form);else return false;\" value=$postcode>";  
  39. echo"<input value='Load Suburbs' type='button' onclick=\"reload(this.form)\" > Click to Load Suburbs for this Postcode.";
  40.  
  41. //////////////////Starting of suburb drop downlist///<<<<--------------SUBURB-------<<<<<<<<<<<<<
  42. echo"<br><br>";
  43. echo"Suburb: ";
  44. echo "<select name='suburb'><option value=''>Select Suburb</option>"; // onchange=\"reload(this.form)\"
  45. while($pop = mysql_fetch_array($query)) { 
  46. echo  "<option value='$pop[suburb]'>$pop[suburb]</option>";
  47. }//else{
  48. //echo  "<option value='$pop[suburb]'>$pop[suburb]</option>";
  49. //}
  50. echo "</select>";
  51. //////////////////  This will end the suburb drop down list ///////////
  52.  
  53. ///////////////Execute this when suburb is selected////////////////////<<-----NEED TO FIX-------<<<<<<
  54. //if(isset($suburb) and strlen($suburb) > 0){
  55. $query_city=mysql_query("SELECT city FROM post2 where postcode=$postcode AND $suburb=$suburb");
  56. //}else{
  57. //$city = 'not_complete1';
  58. //}
  59. $query_state=mysql_query("SELECT state FROM post2 where postcode=$postcode AND $suburb=$suburb");
  60. $query_country=mysql_query("SELECT country FROM post2 where postcode=$postcode AND $suburb=$suburb");
  61.  
  62. echo "<br>";
  63. echo "<br>";
  64. echo "City: <input name='city' type=text value=$city>";
  65. echo "<br>";
  66. echo "<br>";
  67. echo "State: <input name='state' type=text value=$state>";
  68. echo "<br>";
  69. echo "<br>";
  70. echo "Country: <input name='country' type=text value=$country>";
  71.  
  72. //-----------------------------------------------
  73.  
  74. echo "<br><br><input type=submit value=Submit>";
  75. echo "</form>";
  76. ?>
  77. </body>
  78.  
  79. </html>

Thankyou,
Billy
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 1
Reputation: EliteViper is an unknown quantity at this point 
Solved Threads: 0
EliteViper EliteViper is offline Offline
Newbie Poster

Re: Reload with drop-down and text fields

 
0
  #2
May 18th, 2009
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 97
Reputation: itsjareds is an unknown quantity at this point 
Solved Threads: 12
itsjareds's Avatar
itsjareds itsjareds is offline Offline
Junior Poster in Training

Re: Reload with drop-down and text fields

 
0
  #3
May 18th, 2009
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 With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 97
Reputation: itsjareds is an unknown quantity at this point 
Solved Threads: 12
itsjareds's Avatar
itsjareds itsjareds is offline Offline
Junior Poster in Training

Re: Reload with drop-down and text fields

 
0
  #4
May 18th, 2009
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 Syntax (Toggle Plain Text) 
  1. <html>
  2. <head>
  3. 	<title>AJAX Location Script</title>
  4.  
  5. 	<script type="text/javascript" src="ajaxloc.js">
  6. 	// Script created by KnifeySpooney (http://wurbo.com)
  7. 	// This script is free to use and modify.
  8. 	</script>
  9. </head>
  10. <body onLoad="getLocation('suburb')" style="text-align:center;">
  11.  
  12. Suburb: <select name="suburb" onChange="if (this.value != '') getLocation('location', this.value); else clearLocations();">
  13. 	<option value="">- Choose your suburb -</option>
  14. </select>
  15. <br/>
  16. State: <input type="text" name="state"/>
  17. <br/>
  18. Country: <input type="text" name="country"/>
  19.  
  20. </body>
  21. </html>

locations.php
PHP Syntax (Toggle Plain Text) 
  1. <?php
  2.  
  3. $suburbs = array('Evergreen Terrace',
  4. 		 'Quahog',
  5. 		 'South Park',
  6. 		 'Raleigh');
  7.  
  8. $states[array_search('Evergreen Terrace', $suburbs)] = 'Illinois';
  9. $states[array_search('Quahog', $suburbs)] = 'Maryland';
  10. $states[array_search('South Park', $suburbs)] = 'Colorado';
  11. $states[array_search('Raleigh', $suburbs)] = 'North Carolina';
  12.  
  13. $countries[array_search('Evergreen Terrace', $suburbs)] = 'United States';
  14. $countries[array_search('Quahog', $suburbs)] = 'United States';
  15. $countries[array_search('South Park', $suburbs)] = 'United States';
  16. $countries[array_search('Raleigh', $suburbs)] = 'United States';
  17.  
  18. $type = $_REQUEST['type'];
  19.  
  20. if ($type) {
  21. 	header("Content-Type: text/xml");
  22.  
  23. 	echo "<?xml version='1.0' encoding='ISO-8859-1'?>\n";
  24. 	echo "<location>\n";
  25.  
  26. 	if ($type == 'suburb') {
  27. 		for ($i=0; $i<sizeof($suburbs); $i++) {
  28. 			echo "\t<place type='suburb'>" . $suburbs[$i] . "</place>\n";
  29. 		}
  30. 	}
  31.  
  32. 	else if ($type == 'location' && $_REQUEST['loc']) {
  33. 		echo "\t<place type='state'>" . $states[array_search($_REQUEST['loc'], $suburbs)] . "</place>\n";
  34. 		echo "\t<place type='country'>" . $countries[array_search($_REQUEST['loc'], $suburbs)] . "</place>\n";
  35. 	}
  36.  
  37. 	else
  38. 		echo "\t<place>Not all variables specified.</place>\n";
  39.  
  40. 	echo "</location>";
  41. }
  42.  
  43. else {
  44. 	header("Content-Type: text/html");
  45. 	echo "<h1>Error: Please enter a type of location to load.</h1>";
  46. }
  47.  
  48. ?>

ajaxloc.js
JavaScript Syntax (Toggle Plain Text) 
  1. function getLocation(type, where) {
  2. 	var xmlhttp;
  3.  
  4. 	if (window.XMLHttpRequest)
  5. 		xmlhttp = new XMLHttpRequest();
  6. 	else if (window.ActiveXObject)
  7. 		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  8. 	else
  9. 		alert("Your browser does not support XMLHTTP!");
  10.  
  11. 	xmlhttp.onreadystatechange = function() {
  12. 		if(xmlhttp.readyState == 4) {
  13. 			var xmlDoc = xmlhttp.responseXML.documentElement;
  14. 			var loc = xmlDoc.getElementsByTagName("place");
  15.  
  16. 			if (type == "suburb") {
  17. 				for (var a=0; a<loc.length; a++) {
  18. 					var locVal = loc[a].childNodes[0].nodeValue;
  19. 					var elm = document.createElement("option");
  20. 					elm.value = locVal;
  21. 					elm.innerHTML = locVal;
  22. 					document.getElementsByName(type)[0].appendChild(elm);
  23. 				}
  24. 			}
  25. 			else {
  26. 				for (var b=0; b<loc.length; b++) {
  27. 					var id = loc[b].attributes.getNamedItem("type").value;
  28. 					document.getElementsByName(id)[0].value = loc[b].childNodes[0].nodeValue;
  29. 				}
  30. 			}
  31.  		}
  32. 	}
  33. 	xmlhttp.open("GET", "locations.php?type=" + type + "&loc=" + where, true);
  34. 	xmlhttp.send(null);
  35. }
  36. function clearLocations() {
  37. 	document.getElementsByName("state")[0].value = "";
  38. 	document.getElementsByName("country")[0].value = "";
  39. }
Last edited by itsjareds; May 18th, 2009 at 9:04 pm.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child class close column cookies createrange() css cursor dependent disablefirebug dom download dropdown editor element engine error events explorer ext file form forms google gwt gxt hiddenvalue highlightedword html htmlform ie8 iframe image() images internet java javascript jawascriptruntimeerror jquery jsf jsfile jump libcurl math matrixcaptcha microsoft mimic object onerror onmouseoutdivproblem onreadystatechange parent pdf php player post problem progressbar rated rating regex runtime scroll search security select session shopping size software sql star stars synchronous text textarea unicode validation w3c web website window windowofwords windowsxp wysiwyg xml \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC