...

View Full Version : Multi-Select Transfer Box + Javascript + PHP + MySQL



CaptainSlow
11-01-2006, 07:26 AM
Hello! I'm having a bit of trouble with an application I'm trying to write and could use some assistance. I have two major questions but I will provide some background that may help.

I have a database containing a table called Courses. Within this table there are two columns: courseID and courseName. Here's what the table looks like:

courseID courseName
1 Cooking
2 Math
3 Science
4 Gym

Now what I wanted to do was add a feature on a form that two select boxes: the one on the left displayed all the course names and the one on the right would hold courses that the user added. Along with these two boxes there would be two buttons in the middle: one to transfer a course from the left to the right and one to transfer a course from the right to the left. I found the javascript code that could help me with this from http://www.quirksmode.org/js/transfer.html (if you don't understand what I am trying to describe they show an example there). After some minor editing I came up with this code:






function copyToList(from,to)
{
fromList = eval('document.forms[0].' + from);
toList = eval('document.forms[0].' + to);
if (toList.options.length > 0 && toList.options[0].value == 'temp')
{
toList.options.length = 0;
}
var sel = false;
for (i=0;i<fromList.options.length;i++)
{
var current = fromList.options[i];
if (current.selected)
{
sel = true;
if (current.value == 'temp')
{
alert ('You cannot move this text!');
return;
}
txt = current.text;
val = current.value;
toList.options[toList.length] = new Option(txt,val);
fromList.options[i] = null;
i--;
}
}
if (!sel) alert ('You haven\'t selected any options!');
}

function allSelect()
{
List = document.forms[0].chosen;
if (List.length && List.options[0].value == 'temp') return;
for (i=0;i<List.length;i++)
{
List.options[i].selected = true;
}
}


<FORM method = "POST" onSubmit="allSelect()" action = "process.php">
<TABLE>
<tr>
<td>
<SELECT NAME="possible" SIZE="4"
MULTIPLE WIDTH=200 STYLE="width: 200px">
<OPTION VALUE="1">Option 1: Cooking
<OPTION VALUE="2">Option 2: Math
<OPTION VALUE="3">Option 3: Science
<OPTION VALUE="4">Option 4: Gym
</SELECT>
</td>
<td><A HREF="javascript:copyToList('possible','chosen')">--&gt;</A><BR>
<A HREF="javascript:copyToList('chosen','possible')">&lt;--</A>
</td>
<td>
<SELECT NAME="chosen" SIZE="4"
MULTIPLE WIDTH=200 STYLE="width: 200px">
<OPTION VALUE="temp">Make your choice on the left
</SELECT>
</td>
</tr>
<tr>
<td><input name = "submit" type = "submit" value = "sumbit form"></td>
</tr>
</TABLE>
</FORM>



Now the problem I seem to be having is trying to access the form variables (particularly the ones in the right box) so I can enter them into the MySQL database. My process.php is just displaying the variables that were passed to that page and it looks like this:




<?php

echo "<PRE>";
print_r($_POST);
echo "</PRE>";
?>



And here's the output I get when I press submit and get to that particular page:

Array
(
[chosen] => 4
[submit] => sumbit form
)



I am mainly concerned with the [chosen] array. How do I access all the variables that were in there? I add 2-3 courses and press submit but the only result I get is the last option that was submitted (in this case, option 4).

My second question is somewhat similar and involves the select boxes again. Say I have a teacher that has courses associated with them in the database (i.e math and cooking). Is there an easy way to make it so that when the two boxes load on an instructor edit page the left box has the courses that the instructor is already associated with, in this case math and cooking, and the right box has the courses that the instructor is not associated with, in this case science and gym?

I thank you for any help you can give!

maarten126
07-02-2007, 10:54 AM
Does anybody have a solution for this? I also have the same problem...

eeverts
12-15-2007, 09:30 PM
The solution is quite simple. Change the beginning of the second SELECT tag in this way:

<SELECT NAME="chosen[]" ID="chosen" SIZE="4" ...
Explanation:
NAME= causes to put the selected items in the chosen ARRAY.
ID= in this case is needed for the identification in the JS-function.

So in process.php you get the results in this way:

<?php
echo "<PRE>";
print_r($_POST[chosen]);
echo "</PRE>";
?>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum