Drop down menu passes value to 2nd menu--PHP solution?

mduke

<Newbie>: I have a working Javascript that enables me to change the <option> values in a 2nd dropdown based on what I select in the first dropdown menu.

I would much prefer to do this entirely with PHP/MySQL. I have a PHP/MySQL script that will populate my drop down menu. Great, but how can I pass the value of dropdown entry I select to another field on the same page? And the kicker is...I would like to pass it to a text field instead of another dropdown menu.

Alternatively, a tweaked drop down script places values from two different dbase fields (e.g., ID and lastName) in the <select> value and <select> name, respectively. Couldn't a script be written that will split the two values (explode?) and insert them to separate columns in the dbase?

This sounds like a better way to go (eliminates some potential user errors) but I'm not sure how to do it. If there's a post in the archives, maybe I wasn't using the right keywords for searching. Any help (example, tutorials) greatly appreciated.</newbie>

LordShryku

Well, you'll never be able to do it all on the same page without some client side scripting. PHP requires you to send the value to the server before it can do anything with it. So, PHP will never be able to tell what value the second drop down should have without it being submitted first.

Weedpacket

As LordShryku said, it can't be done entirely with PHP (note the fourth thread in my Collected Solutions to Common Problems post at the top of the forum). However, if you look at the third thread there you might find something of use.

bunner_bob

Well you could always put an "onchange" event handler in your first dropdown menu that would submit the page as soon as you make a selection. Then your PHP could generate the appropriate second menu and/or default text box value in response to the submission. It would require a page reload though.

Alternately, if you can get all the possible permutations of the second menu/textbox when the page is initially loaded, you could create the second menu using a named DIV tag and the javascript "document.getElementByID("IDname").innerHTML" routine. Something like this (with apologies for the rusty javascript):

<script language="javascript" type="text/javascript">

function setSecondMenu(choice) {
  if (choice == "1") document.getElementByID("secondmenu").innerHTML = "<select size=\"1\" name=\"menu2\"><option value=\"1\">Second menu choice 1<\/option><option value=\"2\">Second menu choice 2<\/option><\/select>";
  else if (choice == "2") document.getElementByID("secondmenu").innerHTML = "<select size=\"1\" name=\"menu2\"><option value=\"3\">Second menu choice 3<\/option><option value=\"4\">Second menu choice 4<\/option><\/select>";
}
</script>

<select size="1" name="menu1" onchange="setSecondMenu(this.value)">
<option value="1">Menu choice 1</option>
<option value="2">Menu choice 2</option>
</select>

<div ID="secondmenu"></div>

The actual values and text of the menu choices could be PHP variables instead, of course.

To write the value of the first menu choice to a text field, you could either trigger two functions with the "onchange" (second function would set innerHTML of a second DIV tag to the desired text) - or - add a second "then" to each "if" statement in the original function to do the same thing.

The drawback to javascript is of course the browser inconsistency issue. The above should work with most modern browsers, but getElementByID is sketchy on the older ones.

Let me know if this needs clarification. I wouldn't be surprised if it does!

Bob Meador

PS - Hey Marcus - long time no see! Still playing music? Happy new year to ya!

mduke

Thanks, all for the info. So in PHP, I'd have to submit the form to pull the info up for the 2nd field, but since I could call the same page (yes?), then that might not be so bad.

<OT>Bob! Unbelievable! How are ya? Long time no speak/see indeed and funny thing is I was just thinking about you last week, wondering whether you're still in the house by the freeway, still doing DT publishing, and, lo!...Funny, seems we've both been progressing in similar directions. Give me a buzz sometime, 543-4678, mduke@u.washington.edu.</OT>

AstroTeg

Originally posted by bunner bob

The drawback to javascript is of course the browser inconsistency issue.

Using innerHTML for this task will limit the browser support to IE and the Gecko based browsers. A more compatible approach would be to actually use the list box JavaScript functions available. You can more on how to use the JavaScript functions to dynamically modify a list box here:

http://developer.irt.org/script/form.htm#4

You can use the other approach of making round trips to the server to load the 2nd list box, but you're adding a lot of overhead to your script and your web server. For each change the user makes, it has to go out and make a request to the server. Then the server does its processing and brings the new page back. For a list box, the user's expectation is for the change to take effect immediately instead of waiting for a page load. Doesn't mean you can't use this approach, but just be careful and if and when possible, try to keep the round trips to the server a minimum.

mduke

Point taken on the server demand; in my case, for a small LAN, it wouldn't be much of an issue, but for the long view, yeah, I think client-side is not only easier for me (done lot's more javascript than PHP/MySQL), but aesthetically better owing to no reload of the page. I'm not using innerHTML, either, but an older script that seems to work fine on Mac/Win across IE, NS, Safari, Opera, Mozilla....eh!, what more could I want? Cheers.