19 replies to this topic

[Fred]

Hi,

I am trying to make a page with two drop down selection lists.

The first drop down list is populated with manufacturers from a database. This works.
The second drop down list should be automatically populated with types from the chosen manufacturer in the database.
After making the second choice and clicking "submit" the result should be displayed on the same page.

As I gather I should use Ajax to read the choice in the first selection list and automatically display the possible choices in the second selection list. But after reading a lot and trying some I don't seem to get anywhere.

Would anyone be so kind as to help me?

Thanks for reading!

Regards,

Fred.

Attached Files

•  ap_selectplane.php   2.27KB   3 downloads

[rc69]

The php file you provided doesn't appear to be doing anything. You define a function to create an ajax request and then never call the function. In order to make the ajax request, you have to bind an event to the first select box so that when it changes, the ajax function will be called. Further more, ajaxFunction() is incomplete, as it only creates the XmlHttpRequest object without doing anything with it.


There are some amazing intro to ajax tutorials out there that will give you an idea of how to use ajax. You can also easily find some tutorials on how to change the contents of one select box based on a selection in another. Or you could just try and find a tutorial that combines both:
http://www.google.co...ajax select box

[Fred]

The php file you provided doesn't appear to be doing anything. You define a function to create an ajax request and then never call the function. In order to make the ajax request, you have to bind an event to the first select box so that when it changes, the ajax function will be called. Further more, ajaxFunction() is incomplete, as it only creates the XmlHttpRequest object without doing anything with it.


There are some amazing intro to ajax tutorials out there that will give you an idea of how to use ajax. You can also easily find some tutorials on how to change the contents of one select box based on a selection in another. Or you could just try and find a tutorial that combines both:
http://www.google.co...ajax+select+box

Hi,

Thanks for your reply.

The .PHP file displays two drop down selection lists and fills one with the manufacturers in the database:

My link


I have tried to bind an event to the first selection box in order to fill the second selection box with the available options from the database but I get nowhere.

I was trying to learn some PHP and had hoped the above might be accomplished using HTML and PHP but this doesn't seem possible.

I have been searching the Internet on how to accomplish this using AJAX but the topics I have found raises more questions for me then they answer. I tried to adapt several solutions but nothing seems to work.

The search link to google.com you provided shows several interesting links I didn't find while using similar search terms on google.nl. The latter found several topics in the English language but I couldn't get any of them to work while some contained clear errors.

I hope the link to google.com you provided will lead me to some examples I can understand and modify.

Again thanks for your reply.


Regards,

Fred.

[rc69]

If you want to avoid the overhead of having to learn how to use AJAX, you can do this with nothing but php. The catch is you have to do a post in the middle, which will cause a page refresh.

The basic steps would be:
1. Load the page with just the first select box.
2. Choose an option, and hit a submit button (causing a POST or GET request back to the server, GET would probably be the proper choice in this case).
3. On the second load, display the first box with the value you chose selected by default. Then run the query for the second select box and display it.

AJAX would be more convenient for the user, but this will at least let you continue learning php.

[Fred]

If you want to avoid the overhead of having to learn how to use AJAX, you can do this with nothing but php. The catch is you have to do a post in the middle, which will cause a page refresh.

The basic steps would be:
1. Load the page with just the first select box.
2. Choose an option, and hit a submit button (causing a POST or GET request back to the server, GET would probably be the proper choice in this case).
3. On the second load, display the first box with the value you chose selected by default. Then run the query for the second select box and display it.

AJAX would be more convenient for the user, but this will at least let you continue learning php.

Hi,

Thanks for your reply.

I have contemplated doing it this way. But I wouldn't be satisfied with this solution.

I will take some more time and continue to try and understand AJAX. To my disgust I find it unusual hard but I guess this is a ugly consequence of getting old.

Again thanks for your reply.


Regards,

Fred.

[rc69]

I have contemplated doing it this way. But I wouldn't be satisfied with this solution.

Fair enough. However, one last tip: If you can get something working one way, then you can usually come up with another way to solve the same problem quite easily. By that i mean, if you did it using nothing but php, you could come to some realization that makes the AJAX method a little easier

[Fred]

I have contemplated doing it this way. But I wouldn't be satisfied with this solution.

Fair enough. However, one last tip: If you can get something working one way, then you can usually come up with another way to solve the same problem quite easily. By that i mean, if you did it using nothing but php, you could come to some realization that makes the AJAX method a little easier

Hi,

Again, many thanks for your reply.

This is a great suggestion.

If I don't succeed solving it using AJAX I will try this route.


Regards,

Fred.

[Fred]

Hi,

I have again entered some AJAX code but I still don't really understand what I am doing. I don't get any error messages but not to my surprise it doesn't work.

Regards,

Fred.

Attached Files

•  vraag html-site2.php   2.45KB   2 downloads

[rc69]

The php file you provided doesn't appear to be doing anything. You define a function to create an ajax request and then never call the function. In order to make the ajax request, you have to bind an event to the first select box so that when it changes, the ajax function will be called. Further more, ajaxFunction() is incomplete, as it only creates the XmlHttpRequest object without doing anything with it.

You're getting closer to fixing some of the above problems, namely your first select box is now actually doing something. However, ajaxFunction() still does nothing. Reading that file from top to bottom, this is what i see the page doing:
1. You define ajaxFunction(), but that function does nothing so it's not really helpful.
2. You have another script block doing the usual ajax request stuff on a null object which should be throwing some errors in your browser.
3. You display the rest of your page, which connects to a database, makes 2 sql queries, and only populates one select box. However, i'm assuming by the arrows that second select box is actually the contents of "ap_selectplane.php" which you just happened to append to the same file?

For now, i'd recommend you do a little more reading. Perhaps these articles will help (because sitepoint is amazing):

http://blogs.sitepoi...stantiate-ajax/
http://blogs.sitepoi...-ajax-web-apps/
http://www.sitepoint...ideoajaxintro1/

[Fred]

The php file you provided doesn't appear to be doing anything. You define a function to create an ajax request and then never call the function. In order to make the ajax request, you have to bind an event to the first select box so that when it changes, the ajax function will be called. Further more, ajaxFunction() is incomplete, as it only creates the XmlHttpRequest object without doing anything with it.

You're getting closer to fixing some of the above problems, namely your first select box is now actually doing something. However, ajaxFunction() still does nothing. Reading that file from top to bottom, this is what i see the page doing:
1. You define ajaxFunction(), but that function does nothing so it's not really helpful.
2. You have another script block doing the usual ajax request stuff on a null object which should be throwing some errors in your browser.
3. You display the rest of your page, which connects to a database, makes 2 sql queries, and only populates one select box. However, i'm assuming by the arrows that second select box is actually the contents of "ap_selectplane.php" which you just happened to append to the same file?

For now, i'd recommend you do a little more reading. Perhaps these articles will help (because sitepoint is amazing):

http://blogs.sitepoi...stantiate-ajax/
http://blogs.sitepoi...-ajax-web-apps/
http://www.sitepoint...ideoajaxintro1/

Hi,

Many thanks for your reply.

I had made a .PHP file producing two drop down lists and populating the first with manufacturers from the database. (The second drop down list also works if I set a value for $selected but $selected should be set by selecting from the first drop down list.) (I then learned I need AJAX to accomplish what I want the web-page to do.)

Then I put some AJAX code into the .PHP file. (I have recently been reading a lot about AJAX but to my disgust I still don't understand it to the point I can adapt the code in the examples and get it to work. I just can't get the overview of the whole concept. I fear this is a consequence of my age but I hope I will be able to understand how it works when it is complete.)

The arrows (» » » » ») are just to point future users to the second selection.

Many thanks for the links. I hope they will help me understand the concept and finally let the penny drop so I can combine the elements and understand their interaction.


Regards,

Fred.

[rc69]

Let me know if you still need more help after giving those a read. If so, i'll give you a slightly more straight-forward example of how to accomplish what you need.

[Fred]

Let me know if you still need more help after giving those a read. If so, i'll give you a slightly more straight-forward example of how to accomplish what you need.

Hi,

Many thanks for your offer.

I am reading the interesting information your links lead to.


Regards,

Fred.

[Fred]

Let me know if you still need more help after giving those a read. If so, i'll give you a slightly more straight-forward example of how to accomplish what you need.

Hi,

Over the past weeks I have been reading a lot about AJAX and Java script but while having learned a lot I still don't now how to automatically read a selection from the selection list.

Would you be so kind as to help me in the right direction?


Regards,

Fred.

[rc69]

I'm surprised at how hard of a time you are having with this. This problem is actually talked about rather often. So often in fact that i wouldn't be surpised if it were taught in an intro to JS course of some kind.

Anyway, you can see the attached for how to go about doing what you need to do. I haven't tested it, so you'll very likely need to spend some time debugging, but the idea is there. Also, put the following in a new file called: ap_selecttype.php

<option value="">- Select Type -</option>
<?php
$db_host = "localhost";
$db_database = "airplane_airplane";
$db_username = "************";
$db_password = "************";

$dbcnx = mysql_connect($db_host,$db_username,$db_password);

mysql_select_db($db_database);

$result = mysql_query("SELECT DISTINCT type FROM airplanes WHERE merk = '".mysql_real_escape_string($_GET['manufacturer'])."'") or die(mysql_error());
while($row = mysql_fetch_array($result)){
	echo "<option value=\"\">".$row['type']."</option>\n";
}
?>

Attached Files

•  vraag_html-site3.php   2.31KB   2 downloads

[Fred]

Hi,

Many thanks for your reply and your efforts.

I am also surprised about not understanding AJAX. In the past, more then 30 years ago, I have been programming in several languages among them Pascal, Forth as well as Z80 and 6502 assembly. I found programming took much time but I always got the programs to work.
After that, during the period websites contained text and the odd picture, I did program some HTML.

Over the past decades I didn't do a lot of programming as, thanks to the more powerful hardware, the available programs got more flexible and I had no need to write custom made programs.
Towards the end of last year I have started to learn some PHP but a few months ago I found I need some AJAX to accomplish what I wanted to do. I started reading about JS and AJAX but to my disgust I found I just don't get it. I will look at your code and try to understand how it works.

I have uploaded the code you supplied and it looks great but like you predicted it doesn't work yet. I had made a mistake but I have corrected it.

Now the result looks like this:



-----


As it is getting late over here (I am living in Europe) I will again take a closer look at your code tomorrow to try to understand it and try to find the problem.

Again, many thanks for your kind help and your efforts.



Regards,

Fred.

Edited by Fred, 16 May 2011 - 04:41 PM.

[rc69]

Ya, i'm amazed at how much website development has changed since i've gotten into it, i can't imagine how you feel with respect to programming in general. As for the screen shot, it looks right so far. If you can't get it debugged, post the errors and where you think the issue is at and we'll work through it together.

[Fred]

Ya, i'm amazed at how much website development has changed since i've gotten into it, i can't imagine how you feel with respect to programming in general. As for the screen shot, it looks right so far. If you can't get it debugged, post the errors and where you think the issue is at and we'll work through it together.

Hi,

Thanks for your reply and your kind offer.

I am looking at the code and am trying to find the problem. I don't get any error. I hope I can understand the code and find the problem. If not I will get back to you. Meanwhile I wish you a nice day.



Regards,

Fred.

[Fred]

Ya, i'm amazed at how much website development has changed since i've gotten into it, i can't imagine how you feel with respect to programming in general. As for the screen shot, it looks right so far. If you can't get it debugged, post the errors and where you think the issue is at and we'll work through it together.

Hi,

I have replaced "$_GET" by "$_POST" in line 12 of "ap_selecttype.php" as in line 52 of "ap_selectplane.php" "POST" is used:

line 52: ajaxRequest.open("POST", "ap_selecttype.php", true);


But the code still doesn't work. I do not get any errors but the result is still as the picture in my post (16 May 2011 - 05:17 PM) shows.

Would you be so kind as to take another look at the code?


Regards,

Fred.

Attached Files

•  ap_selectplane.php   2.31KB   2 downloads
•  ap_selecttype.php   546bytes   1 downloads

[rc69]

Unfortunately i don't have the time to debug it myself so i can narrow the error down for you. If you could narrow the error down to a specific section of code then you will likely realize what the problem is yourself, or i could help you figure out what is going wrong. My suggestion would be to try and use some JS debugging tools like Firebug or IE's Developer Tools. If you don't know how to use those, then window.alert() should quickly become your best friend.

And you were right to change the GET to POST. That was my bad, sorry. Strictly speaking you should be doing a GET there not a POST so it kind of slipped my mind, but for the sake of getting things to work it doesn't really matter.

[Fred]

Hi,

Thanks for the reply.

I will try Firebug.


Regards,

Fred.