PHP-involved drop-down list.

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
Mightywayne
Forum Contributor
Posts: 237
Joined: Sat Dec 09, 2006 6:46 am

PHP-involved drop-down list.

Post by Mightywayne »

Hey. What I need to do is, there's a dropdown list. When someone clicks something in the dropdown list, something happens. PHP code, or anything. What is exactly going to happen is, I have a list of courses (math, math 2, w/e) and I want people to just select the drop down item, and then right under, the code tells it to print something out about the course. So they don't have to go to the next page to get info about it, y'know?

If it uses HTML or CSS, I'm fine.
Yossarian
Forum Contributor
Posts: 101
Joined: Fri Jun 30, 2006 4:43 am

Is it a bird? is it a plane? its likely a job for JSMan

Post by Yossarian »

Dynamic (ie without going back to the server) related drop down boxes are done using JS, look at some airline sites to see good examples, easyjet, ryanair.

The JS arrays may well be generated on the back end with something like PHP.

Get the JS / HTML working right and work backwards

Good luck.
Mightywayne
Forum Contributor
Posts: 237
Joined: Sat Dec 09, 2006 6:46 am

Post by Mightywayne »

Alright, and when I drop down, I COULD do a PHP query, right?
Yossarian
Forum Contributor
Posts: 101
Joined: Fri Jun 30, 2006 4:43 am

Post by Yossarian »

yes.

Means going back to the server though.

either use JS onchange event or a normal submit.

Whats clever with the airline sites is that they load it all first, each airport they fly from and each destination.

Might depend on how many options your drop down boxes have of course.

HTH
Mightywayne
Forum Contributor
Posts: 237
Joined: Sat Dec 09, 2006 6:46 am

Post by Mightywayne »

Wow, I really can't understand this. I'm looking through tutorial after tutorial and they're giving me like half-php half-javascript tutorials. I just did one and it wasn't even for what I wanted.

All I need to do is have a dropdown list, and then it makes text. Could you just give me the basics or a page with the basics that you know of? They're having me do flips and tricks when all I want to do is go through the hoop.
Mightywayne
Forum Contributor
Posts: 237
Joined: Sat Dec 09, 2006 6:46 am

Post by Mightywayne »

Anyone?
Yossarian
Forum Contributor
Posts: 101
Joined: Fri Jun 30, 2006 4:43 am

Post by Yossarian »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


It sometimes called a toggle, and is JS - nothing to do with PHP, unless you use PHP to generate the lists.

This is full of gotchas, but gives you something to go on.

Ajax is another way to go, likewise getting the contents of the divisions held as JS arrays and displaying them one at a time in a single division.

Code: Select all

<html>
<head>
<title></title>
<SCRIPT>

function toggle(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != 'none' ) {
		el.style.display = 'none';
	}
	else {
		el.style.display = '';
	}

}



</SCRIPT>
</head>
<body>
<form name="Form"> 
<div>
File Available:
<select name="selector" id="selector" onchange="javascript:toggle(this.options[this.selectedIndex].value)">
<option value="this">this</option>
<option value="that">that</option>
</select>
</form>
</div>
<div id="this">
<h1>THIS</h1>
</div>

<div id="that">
<h1>THAT</h1>
</div>

<SCRIPT>

document.getElementById('this').style.display = 'none';
document.getElementById('that').style.display = 'none';

</SCRIPT>


</body>
</html>

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
Mightywayne
Forum Contributor
Posts: 237
Joined: Sat Dec 09, 2006 6:46 am

Post by Mightywayne »

Thanks dude. :) Let's see how it works.
Mightywayne
Forum Contributor
Posts: 237
Joined: Sat Dec 09, 2006 6:46 am

Post by Mightywayne »

It works! :D

Awesome! Now there's just one more problem here. I mean I'd still use it in a live environment, but this would be less annoying to the user.

What seems to be happening is that it "toggles" (duh) the text on and off. What I really would like it to do is when I change whatever category is there, it erases what all else is on the page. Toggle-wise, I mean. So like I made, in addition to "this" and "that", "the other thing", and I'd select like this and that, and then the other thing, and when I select the other thing, I'd like "this" and "that" to go away. And vice versa.

I'm going to make some supper and hopefully I have an answer? xP

I'm not sure if it's important, but here's the code I have...

Code: Select all

<html>
<head>
<title></title>
<SCRIPT>

function toggle(obj) {
        var el = document.getElementById(obj);
        if ( el.style.display != 'none' ) {
                el.style.display = 'none';
        }
        else {
                el.style.display = '';
        }

}



</SCRIPT>
</head>
<body>
<form name="Form">
<div>
File Available:
<select name="selector" id="selector" onchange="javascript:toggle(this.options[this.selectedIndex].value)">
<option value="space"> </option>
<option value="this">this</option>
<option value="that">that</option>
<option value="the other thing">the other thing</option>
</select>
</form>
</div>
<div id="space">
<h1></h1>
</div>

<div id="this">
<h1>THIS</h1>
</div>

<div id="that">
<h1>THAT</h1>
</div>

<div id="the other thing">
<h1>THE OTHER THING</h1>
</div>

<SCRIPT>

document.getElementById('space').style.display = 'none';
document.getElementById('this').style.display = 'none';
document.getElementById('that').style.display = 'none';
document.getElementById('the other thing').style.display = 'none';
</SCRIPT>


</body>
</html>
Post Reply