Multi-Select Transfer Box + Javascript + PHP + MySQL

[CaptainSlow]

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:

[table]
  [tr]
    [td]
      courseID
    [/td]
    [td]
      courseName
    [/td]
  [/tr]
  [tr]
    [td]
      1
    [/td]
    [td]
      Cooking
    [/td]
  [/tr]
  [tr]
    [td]
      2
    [/td]
    [td]
      Math
    [/td]
  [/tr]
  [tr]
    [td]
      3
    [/td]
    [td]
      Science
    [/td]
  [/tr]
  [tr]
    [td]
      4
    [/td]
    [td]
      Gym
    [/td]
  [/tr]
[/table]

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:

[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>
[/code]

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:

[code]<?php

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

And here's the output I get when I press submit and get to that particular page:
[pre]Array
(
    [chosen] => 4
    [submit] => sumbit form
)
[/pre]

I am mainly concerned with the [chosen] array. [b]How do I access all the variables that were in there?[/b] 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). [b]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?[/b]

I thank you for any help you can give and I know most of my questions involve javascript with a little bit of PHP but I was told that this community is very helpful in all subjects involving web programming. If this question is not on topic let me know and I can try and find a more suitable forum. Thanks again!

[HuggieBear]

Are you getting the same response in both IE and Firefox?  What browser are you using?

Regards
Huggie

[CaptainSlow]

[quote author=HuggieBear link=topic=113429.msg460990#msg460990 date=1162372457]
Are you getting the same response in both IE and Firefox?  What browser are you using?

Regards
Huggie
[/quote]

I get the response in both Internet Explorer and Firefox. The browser I am using currently for testing is FireFox 2.0.

[CaptainSlow]

Anyone have any ideas or suggestions?

[sasa]

change[code]<SELECT NAME="chosen" SIZE="4"[/code] to [code]<SELECT NAME="chosen[]" id="chosen" SIZE="4"[/code]

[CaptainSlow]

[quote author=sasa link=topic=113429.msg463160#msg463160 date=1162711715]
change[code]<SELECT NAME="chosen" SIZE="4"[/code] to [code]<SELECT NAME="chosen[]" id="chosen" SIZE="4"[/code]
[/quote]

Wow, thanks that worked! Do you have any explanation as to why that worked? When I was trying to figure it out for myself I tried just making the name value an array (NAME = "chosen[]") rather than adding the id parameter and it essentially broke the transfer boxes.

Also, what does the parameter "id" mean exactly. I asked a friend and he told me it was mainly used for CSS. Because of this I have not been using the id parameter in any of my code. Is this okay or should I be adding it to all my HTML code?

[sasa]

The id attribute, like most other HTML 4.0 standard tags, lets you attach a unique string label to the
form control and its contents for reference by programs (applets) and hyperlinks. This name is distinct
from the name assigned to a control element with the name attribute. Names assigned with the id
attribute are not passed to the server when the form is processed.
The ID attribute takes precedence over the name attribute, so if you have both an ID and name attribute defined inside a form field, the script will use the ID attribute to uniquely identify this field.