#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    1
    Rep Power
    0

    JavaScript and PhP


    I'm fairly new to php/mysql and can't figure out how to accomplish the following:

    I would like to have a form web page which has two pull down menus populated such that when you make a selection in the first menu, the second menu is updated with relevant data.

    If I have a DB with the following:
    Table Regions with RegionID, RegionName
    Table Schools with SchoolID, SchoolName, RegionID where RegionID is the foreign field referencing the table Regions.

    Then I would like the first menu to have a list of all regions. I can do this no problem with php/mysql. But where I get lost is onChange of selection in that list, I would like the second list to be updated with all the schools in that region. And I'd like this all on one page.

    I believe you have to use javascript and I've found examples for how to do it using hardcoded menus -- but I haven't found any using dynamic query based menu options.

    Can anyone help me out here or point me in the right direction? Do I have to somehow embed the javascript in PhP (and if so, how)? Or is this all done in Javascript? I've tried searching and can't seem to find what I'm looking for. Any help would be appreciated. Thank you.
  2. #2
  3. Second highest poster :p
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2001
    Posts
    7,322
    Rep Power
    33
    What you need to do is use the Javascript (JS) onChange event to submit the form.

    What i would do is have a hidden field that the the JS changes and then forces the forum to submit to itself. The PHP script checks for the value of this hidden field. If its the value the JS set then it looks up the value of the region and select all the schools from that region. Make the PHP script also print out all the data back into the form fields so the user doesnt have to re-enter data.

    Try that and see how you go, this is how a lot of people do this.
    - Andreas Koepke

    Koepke Photography

  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    4
    Rep Power
    0
    I know this is the solution to my problem as well; however I'm a newbie to all of this and I'm having trouble incorporating the JScript.

    I can handle filling the first menu with dynamic info from the DB, but after that, I can't figure out how to get the second menu to work.

    I've got a similar setup... first menu would be the Make of all vehicles, second menu would be the Models specific to the Make chosen in the first menu...

    I'd settle for just being able to pass that to a page with a separate menu-- the dual menu thing is nice, but I've spent 2 weeks on this and it's at the heart of what I'm trying to do.

    I appreciate any input that can be offered.
  6. #4
  7. No Profile Picture
    Web Hosting Montreal rep
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Location
    Montreal
    Posts
    9
    Rep Power
    0
    I can handle filling the first menu with dynamic info from the DB, but after that, I can't figure out how to get the second menu to work.
    You can also popuate your second menu from the DB.

    Yourscript.php?FirstMenuChoice=X

    your script would use the var FirstMenuChoice
    (or whatever you want to name it) to

    1) popuate your second menu
    2) remember the item selected in menu one

    javascript is little more complicated.

    Code:
    <html>
    
    <head>
    <script>
    function menutoo_empty(size)
    {
    for(var index = 0; index < size; index++)
    document.test.menutoo.options.remove(0);
    }
    
    function menutootoo(menuon_choice)
    {		 		 
    switch(menuon_choice)
             {
             case '1':			        
             document.test.menutoo.length = 2;
             document.test.menutoo[0].value = 'a';
             document.test.menutoo[0].innerText = 'a';
             document.test.menutoo[1].value = 'b';
             document.test.menutoo[1].innerText = 'b';
             break;
    
             case '2':
             document.test.menutoo.length = 3;
             document.test.menutoo[0].value = 'b';
             document.test.menutoo[0].innerText = 'b';
             document.test.menutoo[1].value = 'c';
             document.test.menutoo[1].innerText = 'c';
             document.test.menutoo[2].value = 'd';
             document.test.menutoo[2].innerText = 'd';
             break;
            }
    }
    </script>
    </head>
    
    <body>
    <form name="test">
    <table><tr>
    <td>
    <select name="menuon"
     onchange="menutootoo(document.test.menuon[document.test.menuon.selectedIndex].value);">
    <option value="1">1</option>
    <option value="2">2</option>
    <select>
    </td>
    
    <td>
    <select name="menutoo" onchange="alert(document.test.menutoo[document.test.menutoo.selectedIndex].value)">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
    </select>
    </td>
    </tr></table>
    </form>
    </body>
    </html>
    I tested it in ie 5 and ns 7... didn't work in ns 7
    problem with innerText. I think that this should be
    enough to get you started down the right path.
    Last edited by WHM; April 10th, 2003 at 11:56 AM.
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    4
    Rep Power
    0
    thank you very much for what you've already done... I'll give that a shot as soon as I get a chance.

IMN logo majestic logo threadwatch logo seochat tools logo