Jump to content

dropdown list to show the pubs in the town

jarv

By jarv
in PHP Coding Help

 Share

Recommended Posts

jarv Advanced Member

jarv

Posted
Posted

hi,

I would like to show a list of pubs in a town that the user has selected from the drop down list

 

http://www.mypubspace.com/dashtest/order.html

 

it is all there working but in a different way

 

If you type Brighton into the Town search, it shows a list of pubs in that town, GREAT!

 

If you click the 'show towns list' link, a drop down appears, (this is where my problem is) When you click the town, I would like to get the list of pubs in that town

 

basically get rid of the form where you type in the box and click the button

 

here is my code HTML and Javascript

<html>
<body>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
var townRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	townRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		townRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			townRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
townRequest.onreadystatechange = function(){
	if(townRequest.readyState == 4){
		var ajaxDisplay = document.getElementById('ajaxDiv');
		ajaxDisplay.innerHTML = townRequest.responseText;
	}
}
var name = document.getElementById('name').value;
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
townRequest.open("GET", "http://www.mypubspace.com/dashtest/pubs.php" + queryString, true);
townRequest.send(null); 
}



function townlistFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		var ajaxDisplay = document.getElementById('ajaxTownlist');
		ajaxDisplay.innerHTML = ajaxRequest.responseText;
	}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/town-select.php", true);
ajaxRequest.send(null); 
}

function countylistFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		var ajaxDisplay = document.getElementById('ajaxCountylist');
		ajaxDisplay.innerHTML = ajaxRequest.responseText;
	}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/county-select.php", true);
ajaxRequest.send(null); 
}

function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}

//-->
</script>

<a href="#" onClick="townlistFunction();">show towns list</a>
<a href="#" onClick="countylistFunction();">show counties list</a>
<div id="ajaxTownlist"></div>
<div id="ajaxCountylist"></div>



<form name='myForm'>
Pub Name: <input type='text' id='name' /> <br />
County: <input type='text' id='county' />
<br />
Town: <input type='text' id='town' />
<input type='button' onclick='ajaxFunction()' value='Query MySQL' />
</form>
<div id='ajaxDiv'></div>
</body>
</html>

 

 

here is my pubs.php code 

<?php
$dbhost = "xxx";
$dbuser = "xxx";
$dbpass = "xxx";
$dbname = "xxx";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String
$name = $_GET['rsPubName'];
$sex = $_GET['rsTown'];
$wpm = $_GET['rsCounty'];
// Escape User Input to help prevent SQL Injection
$name = mysql_real_escape_string($name);
$town = mysql_real_escape_string($town);
$county = mysql_real_escape_string($county);
//build query
$query = "SELECT * FROM pubs WHERE rsTown = '$town'";
$qry_result = mysql_query($query) or die(mysql_error());

//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Region</th>";
$display_string .= "<th>Pub Name</th>";
$display_string .= "<th>Town</th>";
$display_string .= "<th>County</th>";
$display_string .= "</tr>";

// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)){
$display_string .= "<tr>";
$display_string .= "<td>$row[Region]</td>";
$display_string .= "<td>$row[rsPubName]</td>";
$display_string .= "<td>$row[rsTown]</td>";
$display_string .= "<td>$row[rsCounty]</td>";
$display_string .= "</tr>";

}
$display_string .= "</table>";
echo $display_string;
?>

 

here is my town_select.php code 

<?php
$dbhost = "xxx";
$dbuser = "xxx";
$dbpass = "xxx";
$dbname = "xxx";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String
$town = $_GET['rsTown'];
// Escape User Input to help prevent SQL Injection

$town = mysql_real_escape_string($town);
//build query
$query = "SELECT DISTINCT rsTown, COUNT(PUBID) As PubCount FROM pubs GROUP BY rsTown  ORDER BY rsTown ASC";
$qry_result = mysql_query($query) or die(mysql_error());

// Insert a new row in the table for each person returned
	  

$display_string .= "<form name=\"form3\" method=\"post\" action=\"\">";
$display_string .= "<select name=\"menu2\" onChange=\"MM_jumpMenu('parent',this,0)\" class=\"textbox\">";
$display_string .= "<option value=\"\">Search by Town...</option>";
while($row = mysql_fetch_array($qry_result)){
$display_string .= '<option value="rsTown='.$row['rsTown'].'" onclick=\"ajaxFunction()\" id=\"town\">'.$row['rsTown'].' ('.$row['PubCount'].')</option>';
}
$display_string .= "</select>";
$display_string .= "</form>";

echo $display_string;
?>

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

One thing that sticks out is the fact that you are putting the select lists for the town and counties BEFORE the opening form tag, so they are not included in the Form fields. But, since in the main request you are accessing data based upon the ID, that shouldn't matter. But, for good coding standards you should put the fields within the form.

 

In the main ajax request you are trying to acces the town/county value using

   var county = document.getElementById('county').value;
   var town = document.getElementById('town').value;

But, those fields do not exist when the page loads and you are creating them dynamically. So, I don't know if you have referenced them correctly or not. But, I have seen problems where javascript has problems referencing values from dynamically created fields.

 

Here is what I would do:

Create the page so that the Town and County select lists are always generated when the page loads (and included in the form). Plus, make the first value in both lists "All" and make the display property of both as hidden. Then instead of using javascript to populate the lists, use JS to display/hide the list (be sure to set the value to "All" when hiding the lists.

 

Then on your main AJAX call you will always be sending the Town/County value. Of course, if that value is ALL it will not affect the results.

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

Using Firebug, I can see that in the dynamically created lists you are setting the ID in the OPTIONS not the SELECT tag. That is incorrect. The Select tag is the object with a value. Plus, you give all the options the same ID. This is also incorrect. You cannot give mutliple objects the same ID in an HTML page.

 

Your code

<form action="" method="post" name="form3">
<select class="textbox" onchange="MM_jumpMenu('parent',this,0)" name="menu2">
<option value="">Search by Town...</option>
<option id="\"town\"" onclick="\"ajaxFunction()\"" value="order.html?rsTown=Abbots Langley">Abbots Langley (</option>
<option id="\"town\"" onclick="\"ajaxFunction()\"" value="order.html?rsTown=Aberaeron">Aberaeron (4)</option>
...

 

First off there is a literal backslash in the code - not an escape character.

Second, the values look to be a partial URL not just the value of the town. Not sure how you are using that value, but I would think it is incorrect.

 

I don't know what the purpose is of the MM_jumpMenu function, looks like it is trying to change the displayed page. BUt, you have the onclick in the options trying to run the query. I think this is how that code should look for your purposes (But I would still suggest the solution I first proposed above)

<form action="" method="post" name="form3">
<select class="textbox" onchange="ajaxFunction()" id="town" name="town">
<option value="All">Search by Town...</option>
<option value="Abbots Langley">Abbots Langley (</option>
<option value="Aberaeron">Aberaeron (4)</option>
...

Link to comment
Share on other sites
jarv Advanced Member

jarv

Posted
  • Author
Posted

the select lists are in their own form

 



   $display_string .= "<form name=\"form3\" method=\"post\" action=\"\">";
   $display_string .= "<select name=\"menu2\" onChange=\"MM_jumpMenu('parent',this,0)\" class=\"textbox\">";
   $display_string .= "<option value=\"\">Search by Town...</option>";
while($row = mysql_fetch_array($qry_result)){
   $display_string .= '<option value="rsTown='.$row['rsTown'].'" onclick=\"ajaxFunction()\" id=\"town\">'.$row['rsTown'].' ('.$row['PubCount'].')</option>';
}
   $display_string .= "</select>";
   $display_string .= "</form>";

Link to comment
Share on other sites
jarv Advanced Member

jarv

Posted
  • Author
Posted

ok, I changed bits round like you said, still doesn't work, only the Town form field works!

 

town select code:

 

<?php
$dbhost = "xxx";
$dbuser = "xxx";
$dbpass = "xxx";
$dbname = "xxx";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String
$town = $_GET['rsTown'];
// Escape User Input to help prevent SQL Injection

$town = mysql_real_escape_string($town);
//build query
$query = "SELECT DISTINCT rsTown, COUNT(PUBID) As PubCount FROM pubs GROUP BY rsTown  ORDER BY rsTown ASC";
$qry_result = mysql_query($query) or die(mysql_error());

// Insert a new row in the table for each person returned
	  

$display_string .= "<select name=\"menu2\" onChange=\"MM_jumpMenu('parent',this,0)\" class=\"textbox\">";
$display_string .= "<option value=\"\">Search by Town...</option>";
while($row = mysql_fetch_array($qry_result)){
$display_string .= '<option value="order.html?rsTown='.$row['rsTown'].'" onclick=\"ajaxFunction()\" id=\"town\">'.$row['rsTown'].' ('.$row['PubCount'].')</option>';
}
$display_string .= "</select>";

echo $display_string;
?>

 

html / JS

<html>
<body>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
var townRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	townRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		townRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			townRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
townRequest.onreadystatechange = function(){
	if(townRequest.readyState == 4){
		var ajaxDisplay = document.getElementById('ajaxDiv');
		ajaxDisplay.innerHTML = townRequest.responseText;
	}
}
var name = document.getElementById('name').value;
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
townRequest.open("GET", "http://www.mypubspace.com/dashtest/pubs.php" + queryString, true);
townRequest.send(null); 
}



function townlistFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		var ajaxDisplay = document.getElementById('ajaxTownlist');
		var county = document.getElementById('county').value;
		var town = document.getElementById('town').value;
		ajaxDisplay.innerHTML = ajaxRequest.responseText;
	}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/town-select.php", true);
ajaxRequest.send(null); 
}

function countylistFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		var ajaxDisplay = document.getElementById('ajaxCountylist');
		ajaxDisplay.innerHTML = ajaxRequest.responseText;
	}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/county-select.php", true);
ajaxRequest.send(null); 
}

function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}

//-->
</script>

<a href="#" onClick="townlistFunction();">show towns list</a>
<a href="#" onClick="countylistFunction();">show counties list</a>
<form name='myForm'>
<div id="ajaxTownlist"></div>
<div id="ajaxCountylist"></div>

Pub Name: <input type='text' id='name' /> <br />
County: <input type='text' id='county' />
<br />
Town: <input type='text' id='town' />
<input type='button' onclick='ajaxFunction()' value='Query MySQL' />
</form>
<div id='ajaxDiv'></div>
</body>
</html>

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

Exactly what did you change? The code you last posted still puts the ID into the OPTION tags not the SELECT tag. You want to get the value of the "selected" option. Your select list should look somethig like what I posted at the end of my previous post.

 

You also didn't fix the errant backslashes in your code. You were using single quotes to define the option tags but using backslashes before the double-quotes.

 

Plus, as I stated previously the values you are using don't look right to me. Is there some reason you are setting the values as "order.html?rsTown='.$row['rsTown'].'" ? I would think you just want the value and not the "order.html?rsTown=". As you have it that whole thing is going to be sent in your ajax search request.

 

Try creating your select list like this.

$display_string .= "<select name=\"town\" id=\"town\" onChange=\"ajaxFunction();\" class=\"textbox\">\n";
$display_string .= "<option value=\"\">Search by Town...</option>\n";
while($row = mysql_fetch_array($qry_result))
{
    $display_string .= "<option value=\"{$row['rsTown']}\" onclick=\"\">{$row['rsTown']} ({$row['PubCount']})</option>\n";
}
$display_string .= "</select>\n";

 

Then, for the time being, add the following line indicated below to your AJAX function for debugging purposes:

	var name = document.getElementById('name').value;
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
//Add the following line
alert('Query String: ' + queryString);
townRequest.open("GET", "http://www.mypubspace.com/dashtest/pubs.php" + queryString, true);
townRequest.send(null);

That will allow you to determine if the correct values are being sent

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.