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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multi-Select Transfer Box + Javascript + PHP + MySQL

    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:

    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:

    Code:
    <?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!

  • #2
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Does anybody have a solution for this? I also have the same problem...

  • #3
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The solution is quite simple. Change the beginning of the second SELECT tag in this way:
    Code:
    <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 Code:
    <?php
        
    echo "<PRE>";
        
    print_r($_POST[chosen]);
        echo 
    "</PRE>";
    ?>


  •  

    Posting Permissions

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