Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>Planner</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
// Variables we need
var previous = new Array();
var lastClicked = '';
// We are going to attach event listeners, no code at the bottom or anything hard coded...
function addEvent(obj, evType, fn)
{
if(obj.addEventListener)
{
obj.addEventListener(evType, fn, false);
return true;
}
else if(obj.attachEvent)
{
var r = obj.attachEvent('on' + evType, fn);
return r;
}
else
{
return false;
}
}
// Let's begin when the DOM is ready
addEvent(window, 'load', begin);
// Attach the handlers to our selects
function begin()
{
addSelect('numbers');
addSelect('sm');
addSelect('sm2');
}
// We add a couple of handlers to each
function addSelect(id)
{
var sel = document.getElementById(id);
addEvent(sel, 'click', whichElement);
addEvent(sel, 'click', addRemoveClicked);
}
// Find which element we are looking at on this click
function whichElement(e)
{
if(!e)
{
var e = window.event;
}
if(e.target)
{
lastClicked = e.target;
}
else if(e.srcElement)
{
lastClicked = e.srcElement;
}
if(lastClicked.nodeType == 3) // Safari bug
{
lastClicked = lastClicked.parentNode;
}
}
// Make sure we are displaying the correct items
function addRemoveClicked(e)
{
if(!previous[this.id])
{
previous[this.id] = new Array();
}
// Remember what has been used
if(previous[this.id][lastClicked.value] == 1)
{
previous[this.id][lastClicked.value] = 0;
}
else
{
previous[this.id][lastClicked.value] = 1;
}
var selectBox = document.getElementById(this.id);
// Add correct highlighting
for(var i = 0; i < selectBox.options.length; i++)
{
selectBox.options[i].selected = '';
if(previous[this.id][selectBox.options[i].value] == 1)
{
selectBox.options[i].selected = 'selected';
}
}
}
</script>
<select name="numbers[]" id="numbers" multiple="multiple" size="6">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="classes[]" id="classes" multiple="multiple" size="10">
<?PHP echo $classCode ?>
</select>
<input type="submit" name="submit" value="Proceed to Next Step" />
</form>
</body></html>
The value of the $classCode variable (string) =
<option value="1">201 Intro to Financial Accounting</option>
<option value="2">202 Intro to Managerial Accounting</option>
<option value="3">130 Intro to Microeconomics</option>
<option value="4">320 Principles Bus Finance</option>
<option value="5">300 Management, & Human Behavior</option>
The first multiple select select box (named numbers[]) works with Javascript as it should. You're able to click multiple items in the box without having to hold CTRL but the second select box, almost identical to the first, doesn't. I assume because I'm having the program write its own code into a PHP variable, then something happens when I try to embed that PHP variable into the HTML code.
Does anyone know why & how to fix it so the second select box will work the same as the first? You can't click multiple items without having to hold CTRL in the second select box so it's like the javascript functions aren't even registering for the second select box.
Update 1: To prove to everyone that it isn't the echo messing things up, I took everything out of an echo statement and it is now only echoing the PHP variable. Still messes up. First select box works, other one that has the PHP variable doesn't.
Excuse the formatting issue. The first 3 chunks of code are meant to be 1.
Break your echo statement and instead of storing all select box options in an array, render them as they are fetched from the database by iterating thru the result in a while loop. Then the " and \" problem would not arise. Also you can use ' quotes instead of " within the echo statement. Here is what I have assumed the situation may be..
<?PHP
echo "
<!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\">
<head>
<title>Planner</title>
<meta name=\"keywords\" content=\"\" />
<meta name=\"description\" content=\"\" />
<script type=\"text/javascript\">
// Variables we need
var previous = new Array();
var lastClicked = '';
// We are going to attach event listeners, no code at the bottom or anything hard coded...
function addEvent(obj, evType, fn)
{
if(obj.addEventListener)
{
obj.addEventListener(evType, fn, false);
return true;
}
else if(obj.attachEvent)
{
var r = obj.attachEvent('on' + evType, fn);
return r;
}
else
{
return false;
}
}
// Let's begin when the DOM is ready
addEvent(window, 'load', begin);
// Attach the handlers to our selects
function begin()
{
addSelect('numbers');
addSelect('sm');
addSelect('sm2');
}
// We add a couple of handlers to each
function addSelect(id)
{
var sel = document.getElementById(id);
addEvent(sel, 'click', whichElement);
addEvent(sel, 'click', addRemoveClicked);
}
// Find which element we are looking at on this click
function whichElement(e)
{
if(!e)
{
var e = window.event;
}
if(e.target)
{
lastClicked = e.target;
}
else if(e.srcElement)
{
lastClicked = e.srcElement;
}
if(lastClicked.nodeType == 3) // Safari bug
{
lastClicked = lastClicked.parentNode;
}
}
// Make sure we are displaying the correct items
function addRemoveClicked(e)
{
if(!previous[this.id])
{
previous[this.id] = new Array();
}
// Remember what has been used
if(previous[this.id][lastClicked.value] == 1)
{
previous[this.id][lastClicked.value] = 0;
}
else
{
previous[this.id][lastClicked.value] = 1;
}
var selectBox = document.getElementById(this.id);
// Add correct highlighting
for(var i = 0; i < selectBox.options.length; i++)
{
selectBox.options[i].selected = '';
if(previous[this.id][selectBox.options[i].value] == 1)
{
selectBox.options[i].selected = 'selected';
}
}
}
</script>
</head>
<body>
<form name=\"takenClasses\" method=\"post\" action=\"process.php\">
<select name=\"numbers[]\" id=\"numbers\" multiple=\"multiple\" size=\"6\">
<option value=\"1\">One</option>
<option value=\"2\">Two</option>
<option value=\"3\">Three</option>
<option value=\"4\">Four</option>
<option value=\"5\">Five</option>
</select>
<select name=\"classes[]\" id=\"classes\" multiple=\"multiple\" size=\"20\">
";
while($row=mysql_fetch_array($result)) {
echo "<option value='$row[id]'>$row[course_name] </option>
";
}
echo "
</select>
<input type=\"submit\" name=\"submit\" value=\"Proceed to Next Step\" />
</form>
</body></html>";?>
Judging from the code provided, there is absolutely no need to have everything inside an echo. The only thing that needs to be echoed (as far as I can see) is just the $classCode. Example below.
<!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">
<head>
<title>Planner</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
// Variables we need
var previous = new Array();
var lastClicked = '';
// We are going to attach event listeners, no code at the bottom or anything hard coded...
function addEvent(obj, evType, fn)
{
if(obj.addEventListener)
{
obj.addEventListener(evType, fn, false);
return true;
}
else if(obj.attachEvent)
{
var r = obj.attachEvent('on' + evType, fn);
return r;
}
else
{
return false;
}
}
// Let's begin when the DOM is ready
addEvent(window, 'load', begin);
// Attach the handlers to our selects
function begin()
{
addSelect('numbers');
addSelect('sm');
addSelect('sm2');
}
// We add a couple of handlers to each
function addSelect(id)
{
var sel = document.getElementById(id);
addEvent(sel, 'click', whichElement);
addEvent(sel, 'click', addRemoveClicked);
}
// Find which element we are looking at on this click
function whichElement(e)
{
if(!e)
{
var e = window.event;
}
if(e.target)
{
lastClicked = e.target;
}
else if(e.srcElement)
{
lastClicked = e.srcElement;
}
if(lastClicked.nodeType == 3) // Safari bug
{
lastClicked = lastClicked.parentNode;
}
}
// Make sure we are displaying the correct items
function addRemoveClicked(e)
{
if(!previous[this.id])
{
previous[this.id] = new Array();
}
// Remember what has been used
if(previous[this.id][lastClicked.value] == 1)
{
previous[this.id][lastClicked.value] = 0;
}
else
{
previous[this.id][lastClicked.value] = 1;
}
var selectBox = document.getElementById(this.id);
// Add correct highlighting
for(var i = 0; i < selectBox.options.length; i++)
{
selectBox.options[i].selected = '';
if(previous[this.id][selectBox.options[i].value] == 1)
{
selectBox.options[i].selected = 'selected';
}
}
}
</script>
</head>
<body>
<form name="takenClasses" method="post" action="process.php">
<select name="numbers[]" id="numbers" multiple="multiple" size="6">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="classes[]" id="classes" multiple="multiple" size="20">
<?php echo $classCode; ?>
</select>
<input type="submit" name="submit" value="Proceed to Next Step" />
</form>
</body></html>
In the begin function, you attach the handler to the selects by passing the ID attribute of each to the addSelect function. You are not doing this for your new select. You simply need to do so:
addSelect('classes');