...

View Full Version : JS cascading drop down problem



Moswell
07-15-2009, 07:57 PM
Hi. I'm using a dynamic cascading dropdown javascript for my webpage (http://www.moswell.people.haverford.edu/jstesting2.php) 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:


<!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.

Moswell
07-15-2009, 08:16 PM
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:


//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

//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.

fside
07-16-2009, 10:09 AM
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.

Moswell
07-16-2009, 01:45 PM
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?

fside
07-16-2009, 10:45 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum