9 replies to this topic

[missionaire]

Hi,

After the reading through some of the reference tutorials, I am still tempted to find out how can I get Ajax to print out the details of Selection List 2 from the Selection Values based from Selection List 1.

I know I can jolly well use Javascript for this, by prompting the selection list values to the url, and using a $_GET, but, the fact is that I do not want normal user to change the values from the url, hence, using Ajax to send the data will be able to keep that from normal users.

My basic concept is something like this Sample Javascript Selection List

Instead of using arrays, I wish to change the data to be capturing from my database (for both selection list).
The question is, how can I prompt the data to show on the page through Ajax?

Such as twodded tutorial: AJAX: Asynchronous Javascript and XML (Using PHP to send data)
Instead of displaying Username: Bob and Posts: 12, can I have the output in a Selection List?

Please help. Thank you in advance.

[rc69]

All this talk about promthing, get, and capturing is throwing me for a loop. In other words, i don't understand what you're asking.

Are you wanting to dynamically form select box 1, select something, and depending on what was selected, adjust select box 2's values? Or do you have a pre-defined select box 1 with the adjustable values in select box 2?

[missionaire]

rc69, on Feb 14 2006, 04:57 AM, said:

All this talk about promthing, get, and capturing is throwing me for a loop. In other words, i don't understand what you're asking.

Are you wanting to dynamically form select box 1, select something, and depending on what was selected, adjust select box 2's values? Or do you have a pre-defined select box 1 with the adjustable values in select box 2?

Sorry to get you confused.

Yes. Dynamically form select box 1, and depending on what is selected, will adjust the select box 2's value. Both the values will be coming from the database.

Thanks.

[rc69]

Well, you can output box1 through the php directly via something like whats in: http://www.pixel2lif...showtopic=18184

And once you have that, use AJAX to request the php script for box2, and have the script output some comma seperated values to the AJAX. Then use the split() function to split the values into an array, and modify what you already have a bit to work with the split up values.

[missionaire]

rc69, on Feb 15 2006, 07:03 AM, said:

Well, you can output box1 through the php directly via something like whats in: http://www.pixel2lif...showtopic=18184

And once you have that, use AJAX to request the php script for box2, and have the script output some comma seperated values to the AJAX. Then use the split() function to split the values into an array, and modify what you already have a bit to work with the split up values.

I think probably it will be better to include the screenshots as well, so as to make explanation easier.

Image 1 ->

Image 2 ->

Image 3 ->

The attachment is the flow of how the ajax should be doing.

test.php = form
test2.php = retrive of items from database
ajax.js = the ajax processing

For test.php, I will include the interface as to what is shown in Image 1.

For test2.php, I will include the following, we will just select the Asia Pacific (option = 1), shown in Image 2, for simplicity :

Quote

if ($_GET['ans'] == 1) {

mysql_select_db($mydb, $mycon);
$query_Recordset1 = "SELECT country_name FROM region_list WHERE region_link = 1";
$Recordset1 = mysql_query($query_Recordset1, $mycon) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);

}

Suppose the results will be "China", "Hong Kong", "Thailand", "Singapore".
Q1. How do I output the results in a list with the comma separated values to ajax?
Q2. Under ajax, I understand that I can use the split() function to separate the values, but how can I tell the script that I have how many values to split?
(PS: Since the results are from database, the list may increase with "Malaysia", "Japan", etc) How can the script determine how many results I have and generate it into an array?
Q3. Where do I include the <select> to display the results, in the ajax.js page or otherwise?

Please advise. Thanks.

[rc69]

1. Loop through the sql result and output the desired value with a comma after it

while($r = mysql_fetch_assoc($sql)){
	echo $r['value'].',';
}

Of course, that's the simple way of doing it, and after the JS splits them, you'll probably have an extra array value that's empty, and you'll have to handle that some how.

2. Umm... don't understand. You don't need to tell the JS how many values, the split will automatically size the array depending on whats outputted by the php, then you can use the script you already have to just loop through it (note: to get the size of an array you can use the length method - arrayVar.length)

3. For box1, you'd put it in the php, for box2 you could look at the innerHTML property in JS, or try your hand at some DOM manipulation (either way, it will be handled by the JS, whether or not it's in ajax.js is up to you).
http://www.quirksmod.../innerhtml.html <-- recommended read (they have a ton of good info on js, i would recommend google to search the site since their navigation is a little confusing).

Edited by rc69, 17 February 2006 - 04:54 PM.

[missionaire]

Hi,

I still can't figure out. Is the code for the js like this:

function triggered() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
  var nums = xmlhttp.responseText.split(':');

		var totallength = nums.length - 1;
	var i;
	var opts = new Array();
	for (i=0; i < totallength; i++){	
		   opts = "<option value="+nums[i]+">"+nums[i]+"</option>";
		
	}

	   document.getElementById("country").innerHTML = "<select name='countrysel' id='countrysel'><option value="+opts[i]+">"+opts[i]+"</option></select>";
}

[rc69]

If "country" is the ID of the element containing the select box, then that's semi-write. I would recommend not using just getElementById alone though. It's not cross-browser compatable, and you can google plenty of tutorials on how to get it working right.

Next, the problem. You initialize "opts" as an array, but in the for-loop you treat it like a string which contains the full option tag needed for in the select element. After that, you try accessing different elements of "opts" which don't exist, and try to add full option tags to the different values of an option tag.

In other words, try using the following for that last part.

	var opts='';
	for (i=0; i < totallength; i++){	
		   opts += '<option value="'+nums[i]+'">'+nums[i]+'</option>';
		
	}

	document.getElementById('countrysel').innerHTML = opts;

[missionaire]

rc69, on Feb 21 2006, 08:12 AM, said:

If "country" is the ID of the element containing the select box, then that's semi-write. I would recommend not using just getElementById alone though. It's not cross-browser compatable, and you can google plenty of tutorials on how to get it working right.

Next, the problem. You initialize "opts" as an array, but in the for-loop you treat it like a string which contains the full option tag needed for in the select element. After that, you try accessing different elements of "opts" which don't exist, and try to add full option tags to the different values of an option tag.

In other words, try using the following for that last part.

	var opts='';
	for (i=0; i < totallength; i++){	
		   opts += '<option value="'+nums[i]+'">'+nums[i]+'</option>';
		
	}

	document.getElementById('countrysel').innerHTML = opts;

Hi rc69,

I managed to get the stuff working, I really appreciated your assistance. Thank you so much.

[missionaire]

Hi,

This is an extended question from the issue, I tried to use the method but couldn't solve the following.

If I have an additional selection list named "Postal Code" ( besides the Country and Region) and the list of options for Postal Code is dependent on the selection of Country.

For example, if I selected the following:
Region : Asia Pacific
Country : China

Options generated from database for Postal Code selection list will be:
Postal Code : 111111, 22222, 33333

If I selected other Country options, they will generate different sets of postal code. Can anyone please advise me how will I be able to solve this issue?

Thanks.

Can anyone please help?

Thanks in advance.