Ajax/Php dynamic form - _GET

randombar

Hi Lads,

I'm having a small problem with my ajax find page, I've a drop down for continents which then creates a drop down for countries within that continent which then creates a drop down for areas/counties within that country.

That's all working fine but when I submit to the findresults page the ajax country and county drop down values arent pushed through?

Here's the search page:

http://www.ratemypub.ie/finda.php

Thanks
Gary

cgarvey

I'm guessing here (just had a quick look), but it's probably something to do with your Country/County inputs not being in the DOM until you run your AJAX. You could include the actual select input in the DOM (just with no options), as you hide the div anyway, and I'm guessing that would work around the problem.

randombar

Ya I was guessing it was something like that, so basically I would have

<select name="rubbish"><div id="blah"></div></select>

and pass the options out of the other php page?

randombar

I tried doing that and I got errors:

document.getElementById("txtCountry") has no properties

I basically had

<tr>
<td width="20%"><h3>Continent</h3></td>
<td ><select name="continentid" onchange="showCountry(this.value)">
<div id="txtCountry"></div>
</select></td>
</tr>

and passed into this div was

<option value="0">All Continents</option>
<option value="1">Blah</option>
etc

and it came back with the error, I'm guessing it's something to do with the div but not really sure what?

I changed the code back to what I had initally, any help would be appreciated!

cgarvey

<td><div id="txtCountry"><select name="continentid" onchange="showCountry(this.value)"></select></div>
</td>

You can't have the <div> inside the <select>

That way (assuming you have CSS hiding txtCountry) the form input will still be in the DOM, but won't be displayed to the user, until your AJAX-request code kicks in. If that doesn't work, I'll take another look.

randombar

Hi again,

I've tried this code again and still no joy, thanks for taking the time to help me by the way.

You can see what's happening there, and what I did to change it to what you wanted. (I really dont mind showing the options at the start!)

The php backend is something like this

$continentid=0;
$continentid=$_GET['continentid'];

$countryid=0;
$countryid=$_GET['countryid'];

$countyid=0;
$countyid=$_GET['countyid'];


if ($continentid>0){


mysql_select_db(*********);
$query_Recordset1 = "SELECT * FROM country WHERE `continent`= $continentid;";
$Recordset1 = mysql_query($query_Recordset1, $connRate) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);

echo "<tr><td width=\"20%\">Country</td><td><select name=\"countryid\" onchange=\"showCounty(this.value)\"><option value=\"0\">All Countries</option>";
      	
  	
	do{
	$response="<option value=\"".$row_Recordset1['id']."\">".$row_Recordset1['country']."</option>";
	echo $response;
	} while ($row_Recordset1 = mysql_fetch_assoc($Recordset1));
	
echo "</select></td></tr>";

}

if ($countryid>0){

mysql_select_db(******);
$query_Recordset1 = "SELECT * FROM county WHERE `countryid`= $countryid;";
$Recordset1 = mysql_query($query_Recordset1, $connRate) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);

echo "<tr><td width=\"20%\">Area</td><td><select name=\"countyid\"><option value=\"0\">All Areas</option>";
		
	do{
	$response="<option value=\"".$row_Recordset1['id']."\">".$row_Recordset1['county']."</option>";
	echo $response;
	} while ($row_Recordset1 = mysql_fetch_assoc($Recordset1));

echo "</select></td></tr>";

}

Now sure if this makes sense but I'm just spitting back out the row setup the select part then going through a while loop to spit out the options and closing it off again?

Any help would be much appreciated

Thanks again for your time!

cgarvey

Will take a look now in a few mins, but I notice you've duplicate inputs on the page in the URL of your first post... in case that triggers any light bulb, before I check

Liam Byrne

1. Don't return the select open & close tags from the PHP
2. Use jQuery to do the AJAX bit

I've it working on the following site (still under development, btw, so no critiques on it just yet, please):

http://www.weddingservices-nearu.co.uk/

cgarvey

2 problems:

1. You're returning a snippet of HTML (which includes a table, a select and various option tags), and inserting that in to the DOM.
2. You already have countryid input in the DOM (and insert a second input by the same name, after your AJAX request comes back).

So, if you don't want to use an existing framework for this type of stuff, then you're probably better off returning just the data (as XML, or as JavaScript which you can then execute using "eval()"), leaving the empty <selects> there (initially hidden in CSS if you like), and using JavaScript to populate those select tags based on the results of your AJAX query. jQuery (although bulky) will do this for you much handier (though, you'll have to modify your PHP to not output all that HTML), or many of the other common AJAX/Web2.0 frameworks will also make it easier (mootools.net is one such one and is written to be compact, but functional).

Basically when the initial HTML page loads, all the form inputs that you want to submit should be present (even if empty, and hidden in CSS). Your trick of coming along with an AJAX response and inserting some HTML (which includes form inputes) into the DOM, after it has initially loaded, doesn't work.

Where I do this, I have my PHP script output JavaScript which I then "eval"uate in my AJAX response handler. So my PHP might output

addNewCountry( 1, 'Ireland' );
addNewCountry( 2, 'England );
...

and my AJAX response handler would then clear all existing options in

while( document.forms[0].elements[ 'countryid' ].length > 0 ) document.forms[0].elements[ 'countryid' ][0] = null;

and then

eval( ajaxResponse );

(which is essentially all the addNewCountry(..) lines output by the PHP. My addNewCountry looks like

function addNewCountry( id, name ) {
document.forms[0].elements[ 'countryid ][ document.forms[0].elements[ 'countryid' ].length ] = new Option( name, id );
}

Like I say, many frameworks out there will make this easier for you, but I'm trying to point out the error in your theory. The sample code needs to be hardened a bit (like check for errors in response, what to do if no results come back, deal with quotes, etc.).

HTH

EDIT: Just noticed Liam's reply, and I agree. Although I do go one step further and not return any HTML (he returns <option> tags), although I think that's more to do with habit (problems in Safari and DOM event handling which I believe is fixed long ago) than correctness.

randombar

Hi lads,

Thanks a lot for the help, I'll give this a whirl over the weekend. I'm very new to ajax but liking it a lot. Might add a lot of functionality to the site!

I def owe ye pints!