Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts

    JS cascading drop down problem

    Hi. I'm using a dynamic cascading dropdown javascript for my webpage that for the most part is working well. Two problems:

    1. I'm using some php to make the dropdown a form so that when a user makes choices and submits, those values are retained. This works well in Firefox 3, but not in IE. It looks like the html submitted="submitted" tags are being put into the html code in IE, but for some reason IE isn't taking that into account.

    2. I would really, really like the third drop down to revert to "Choose a song" when a new composer is chosen. It automatically reverts to "choose a book" (the second drop down), but for the life of me nothing I try can make both drop downs revert when the first drop down is changed.

    Here's the code:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <title><?php echo $page_title?></title>
        <script type='text/javascript' src='cascade2.js'></script>
        <?php
        
    require_once ('../mysql_connect_lutesongs.php'); // Connect to the database.
            
            
    function composer_select() {
                     
    $optionone $_POST['composers'];
                
    $query="SELECT Comp_Name, Comp_ID, Comp_LName FROM Composer ORDER BY Comp_LName";
                
    $result=mysql_query($query);
                echo 
    "<select class=\"input\" name=\"composers\" id=\"composers\">";
                while (
    $row=mysql_fetch_array($result)){
                    
    $compid $row['Comp_ID'];
                    echo 
    "<option value=\"$compid\"";
                    if (
    $compid == $optionone) {
                        echo 
    ' selected="selected"';
                    }
                    echo 
    ">$row[Comp_Name]</option>\n";
                }
                echo 
    "</select>";
            }
        
            function 
    book_select() {
            
    $optiontwo $_POST['sources'];
            
    $query="SELECT Source.Source_ID, Book_Title, Composer.Comp_ID, Comp_Name FROM Source, Composer JOIN Writes ON Source.Source_ID = Writes.Source_ID AND Composer.Comp_ID = Writes.Comp_ID";
            
    $result=mysql_query($query);
            echo 
    "<select name=\"sources\" id=\"sources\">
            <option class=\"none\" value=\"none\">Select a Book</option>\n"
    ;
                while (
    $row=mysql_fetch_array($result)) {
                    
    $sourceid $row['Source_ID'];
                    echo 
    "<option value=\"$sourceid\"";
                    if (
    $sourceid == $optiontwo) {
                        echo 
    ' selected="selected"';
                    }
                    echo 
    " class=\"$row[Comp_ID]\">$row[Book_Title]</option>\n";
                }
                echo 
    "</select>";
            }

            function 
    song_select() {
            
    $optionthree $_POST['songs'];
            
    $query="SELECT Song.Song_Title, Song.Song_ID, Song.Source_ID, Composer.Comp_ID FROM Song, Composer JOIN Source ON Song.Source_ID = Source.Source_ID JOIN Writes on Song.Source_ID = Writes.Source_ID AND Composer.Comp_ID = Writes.Comp_ID";
            
    $result=mysql_query($query);
            echo 
    "<select name=\"songs\" id=\"songs\">
            <option class=\"none\" value=\"none\">Select a Song</option>\n"
    ;
            while (
    $row=mysql_fetch_array($result)) {
                
    $songid $row['Song_ID'];
                    echo 
    "<option class=\"$row[Source_ID]\" value=\"$songid\"";
                    if (
    $songid == $optionthree) {
                        echo 
    ' selected="selected"';
                    }
                    echo 
    ">$row[Song_Title]</option>\n";
                }
                echo 
    "</select>";
            }
                
    ?>
    </head>
    <body>
        <h1>Cascading Dropdown Menus</h1>
    <form name="form" action="jstesting2.php" method="post">
    <label for="composers">composers: </label>
    <?php composer_select(); ?>
            
    <br/>

    <label for="sources">sources: </label>
    <?php book_select(); ?>

    <br/>

    <label for="songs">songs: </label>
    <?php song_select(); ?>

    <input type="submit" name="refinesearch" value="Get value" />
            </form>
    </body>
    </html>
    Thanks in advance for taking a look.

  • #2
    New Coder
    Join Date
    Jul 2008
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry, I realized the link to my page might not be obvious: it's http://www.moswell.people.haverford.edu/jstesting2.php.

    I suspect the javascript that needs to be adjusted is this:

    Code:
    //Applies cascading behavior for the specified dropdowns
    function applyCascadingDropdown(sourceId, targetId) {
        var source = document.getElementById(sourceId);
        var target = document.getElementById(targetId);
        if (source && target) {
            source.onchange = function() {
              displayOptionItemsByClass(target, source.value);
            } 
            displayOptionItemsByClass(target, source.value);
        }
    }
    But although I've tried the following, which seems to make sense to me
    Code:
    //Applies cascading behavior for the specified dropdowns
    function applyCascadingDropdown(sourceId, targetId) {
        var source = document.getElementById(sourceId);
        var target = document.getElementById(targetId);
        if (source && target) {
            source.onchange = function() {
                            if (sourceId == "composers") {
                    var songElement = getElementById("songs");
                    var options = songElement.getElementsByTagName("option");
                    for (var i=0; i < options.length; i++) {
                       songElement.removeChild(options[i]); # or maybe options[0]
                    }
                    
                } 
                displayOptionItemsByClass(target, source.value);
            } 
            displayOptionItemsByClass(target, source.value);
        }
    }
    I still can't get it to work.
    Last edited by Moswell; 07-15-2009 at 08:24 PM.

  • #3
    Regular Coder
    Join Date
    Mar 2008
    Posts
    301
    Thanks
    2
    Thanked 30 Times in 30 Posts
    The php is a little confusing in that you seem to have abandoned it in the second example. But just logically, if you have composer, book, song, and you wish to select composer, book, blank (however it would read), then you're missing a category. A new composer brings up his books. But the third box should have just one entry or nothing at all.

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by fside View Post
    The php is a little confusing in that you seem to have abandoned it in the second example. But just logically, if you have composer, book, song, and you wish to select composer, book, blank (however it would read), then you're missing a category. A new composer brings up his books. But the third box should have just one entry or nothing at all.
    Thanks for looking. The second example is just the javascript that's supposed to run it all, I picked it up elsewhere on the web. The php is for creating the drop downs and then making the form "sticky" (I'm sure that part could be done in javascript, but since I knew how to do it in php I just stuck with that).

    The way it should work: A person chooses a composer from the first drop down - the second drop down populates with books by that composer (with the first option being "choose a book") and the third drop down with "choose a song" until a book is chosen, at which point that drop down too will be populated. This works the first time. However, after you choose one composer, book, song, if you change the name of the composer, the book drop down changes back to "choose a book" but the song drop down remains based on the old choices. What I want is for the song drop down to revert to "choose a song" when the composer changes as well. Does that make sense?

  • #5
    Regular Coder
    Join Date
    Mar 2008
    Posts
    301
    Thanks
    2
    Thanked 30 Times in 30 Posts
    Quote Originally Posted by Moswell View Post
    The way it should work
    Looks like you resolved this on your own simply by selecting top-of-the-list for book and chapter with each new author selection.

    Now you've got a problem in that IE is setting SELECTED to 1 for both book and chapter after looking up a new entry? Sometimes, that's due to some syntax error. But if IE requires you to reset the SELECTED, then you'll just have to save the current values, and reset them in script after IE updates.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •