Computing.Net > Forums > Web Development > 'active' drop-down lists

Computer Problems? Computing.Net has over 1,000,000 posts about all things technology related! Over 90% answered within 24 hours! Click here to start participating now! Also, be sure to check out the New User Guide.

'active' drop-down lists

Reply to Message Icon

Name: AshTheIdiot
Date: August 25, 2006 at 14:24:58 Pacific
OS: Win XP
CPU/Ram: P4 3.2GHz, 1Gb Ram
Comment:

I'm just wondering if anyone can recommend what the best (or only) way of having dropdown lists that affect the rest of the page almost instantly. That's probably not a very good description actually...

As an example, usually used on order forms etc., when you're asked to select a country in one drop-down list, the page will refresh quickly but keep all the correct info and then the drop-down list below will have different contents depending on the previous one.
So, if the first drop-down list was a country select which selected the UK the next one might be updated to display all the counties, or cities, in the UK.

I've been learning php and MySQL recently and I can't think of any way of doing this using just them. Is it possible? Or is it likely to be a JavaScript function?

Any help would be great!
Thanks!



Sponsored Link
Ads by Google

Response Number 1
Name: Laler
Date: August 25, 2006 at 17:05:51 Pacific
Reply:

To make it instant yes you need javascript.

But loading all counties & cities into the user's browser on pageload, will probably scare them away. Not to mention if the user don't have javascript.

The best way is to use ajax, the safe one, the one that still "work" without javascript.

I'm also new in using it, but here's one tutorial that I liked the most: The tutorial. And here's the sample page, view the source of it.

And here's another very simple readings about ajax concept :-)

---
Fubar


0

Response Number 2
Name: Laler
Date: August 25, 2006 at 17:07:02 Pacific
Reply:

btw talking about ajax dropdown lists, this is one you must see: http://labs.google.com/suggest :-D

---
Fubar


0

Response Number 3
Name: Michael J (by mjdamato)
Date: August 26, 2006 at 00:22:53 Pacific
Reply:

A couple comments:

In the original post the question ws about how to get this functionality after a form change and reloading the page. To answer the question directly, it would be done in ther server side code - i.e. the PHP.

However, Laler's solutions are a better approach - especially when the list of data can be very long. If you are dealing with a limited number of items that can appear in the list then client side JavaScript is a good choice as well.

Michael J


0

Response Number 4
Name: AshTheIdiot
Date: August 26, 2006 at 03:09:26 Pacific
Reply:

Thanks for the answers so far. But as far as adding a form with a list of countries and cities goes, that was just an example...

I'm actually trying to build an admin page for a guitar tab website my friend is making. I was planning on using this so I can have a drop-down list of the artist he's submitting the tab for, then the drop-down list below would update and list all the album's that artist has released and then the drop-down list below that would update with all the songs in that album. All of the data in these will be drawn from the database.

I've actually found a JavaScript script which someone on another website recommended that looks like it might do the job. I know practically nothing about JavaScript though so I'm gonna have to look through it. I'm using I can integrate PHP and MySQL within JavaScript code?


0

Response Number 5
Name: Laler
Date: August 26, 2006 at 03:13:36 Pacific
Reply:

Sorry if I don't really understand the question :-D I think it was, "how to (very) instantly change the dropdown list".

To use php only (and a little javascript), this is a sample:


The first output:

[select name="country" onchange="this.form.submit();"]
[option value="uk"]UK[/option]
[option value="us"]US[/option]
[/select]

[select name="cities"]
[option value="london"]London[/option]
[option value="manch"]Manchester[/option]
[/select]

[input type="submit" name="Submit" value="ok" /]

--- now when people change values in the first dropdown box, the form will be submitted without the "Submit" button... so in PHP you can do something like this:


$cities = /* the first country's cities' selectbox code */;

if (isset ($_POST['country']))
{
// == Grab Cities for this country
// == Construct selectbox
}

if (isset ($_POST['Submit']))
{
// == Real submit
}


--- that might give you something to start although there'll still be so many things to ne done, to make it work flawlessly.

---
Fubar


0

Related Posts

See More



Response Number 6
Name: Laler
Date: August 26, 2006 at 03:17:53 Pacific
Reply:

You posted while I was writing :D


I know practically nothing about JavaScript though so I'm gonna have to look through it. I'm using I can integrate PHP and MySQL within JavaScript code?

If it is a pure javascript, then no you cannot grab the database from serverside - unless you use ajax.

Or unless, you construct the whole javascript database (artists, song info, etc) on pageload by using PHP (if it's not too big, or it'll clog the user's browser).

---
Fubar


0

Response Number 7
Name: AshTheIdiot
Date: August 26, 2006 at 03:48:15 Pacific
Reply:

By the looks of it, the JavaScript I wanted to use from this site builds up a bunch of arrays that get loaded up when the user selects an option from the first drop-down list. So there is no way I can use my database information to populate these arrays instead of having a set list in the page?

The code I'm looking at is Here


0

Response Number 8
Name: Michael J (by mjdamato)
Date: August 26, 2006 at 04:16:18 Pacific
Reply:

Lists of Artist, Albums, and Titles is way too much information to be handled client side. So, I think the best aproach using PHP (since it is what you are most familiar with) is as follows.

As Laler explained above you will have the three select lists. When the page initially loads you would just populate the Artist list. When the user selects the artist it submits the page using the onChange event and when the page reloads it populates the Album list. Then follow the same process for the Album/Title relationship.

Here is some pseudo code that may help you to get started. I would make the first item in each list be (Select) with a value of "".

=================================
..grab list of artists from db, create artist select list (be sure to select the POSTed artist value if it was submitted.)

if ($_POST[artist] && $_POST[artist]!="") {

..grab list of albums for the POSTed artist from db, create album select list (be sure to select the POSTed album value if it was submitted.)

} else {

..Just display the "(Select)" item for the album list

}

if ($_POST[album] && $_POST[album]!="") {

..grab list of titles for the POSTed album from db, create title select list (be sure to select the POSTed title value if it was submitted.)

} else {

..Just display the "(Select)" item for the title list

}
==================================

That is a little sloppy and mayby not the best structure, but it may help you.

Michael J


0

Response Number 9
Name: Laler
Date: August 26, 2006 at 04:17:00 Pacific
Reply:

So there is no way I can use my database information to populate these arrays instead of having a set list in the page?

If only some of data, you cannot, unless you use ajax.

But if you construct it in the beginning, then send them all on pageload, of course you can generate the javascript codes, by using php:

echo '<script type="text/javascript">' . "\n";

echo 'var arrItems1 = new Array();';

foreach ($data as $key => $val)
{
echo 'arrItems1[' . $key . '] = "' . $val . '";';
}

...and so on

($data is your php data array taken from DB)

---
Fubar


0

Response Number 10
Name: Laler
Date: August 26, 2006 at 04:18:58 Pacific
Reply:

again, Michae J posted while I was writing :D

-- in short, I agree with him that loading the whole data on javascript is not a good option.

---
Fubar


0

Response Number 11
Name: AshTheIdiot
Date: August 27, 2006 at 11:01:03 Pacific
Reply:

Thanks a lot for the responses guys. I had a look at a JavaScript book I found and seeing that and reading your recommendations again has really made me realise how using the DB to insert JavaScript array values really wouldn't be the best idea!

I'm probably going to have a good read through it for the time being anyway and get a bit more familiar with it in general before I try and get this done, but I probably will stick to what you've suggested. Thanks a lot!


0

Sponsored Link
Ads by Google
Reply to Message Icon






Post Locked

This post is quite old and has been locked from receiving new replies. Please create a new posting instead.


Go to Web Development Forum Home


Sponsored links

Ads by Google


Results for: 'active' drop-down lists

dynamic drop down list www.computing.net/answers/webdevel/dynamic-drop-down-list/180.html

drop down menu database link www.computing.net/answers/webdevel/drop-down-menu-database-link/1447.html

Drop Down Box www.computing.net/answers/webdevel/drop-down-box/2882.html