SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I output js picklist items into an array?

    Hello;

    Can anybody tell me how to get the chosen items below (on Picklist.php page) to output on PickListDisplay.php page in an array that I can insert into a MySQL database?

    (Here is where I got the JavaScript code: http://www.quirksmode.org/js/transfer.html

    PHP Code:
    // PickList.php

    // header of the page.
    function copyToList(from,to)
    {
        
    fromList = eval('document.forms[0].' from);
        
    toList = eval('document.forms[0].' to);
        if (
    toList.options.length && 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 (!
    selalert ('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;
      }
    }

    // html starts here.
    <FORM action="PickListDisplay.php" onSubmit="allSelect(); return true">
    <
    TABLE CELLPADDING=10 CELLSPACING=0 BORDER=1>
    <
    TR><TD><P>Possible options:<BR>
    <
    SELECT NAME="possible" SIZE="4" MULTIPLE WIDTH=200 STYLE="width: 200px">
    <
    OPTION VALUE="House">Option 1House</OPTION>
    <
    OPTION VALUE="Chamber">Option 2Chamber</OPTION>
    <
    OPTION VALUE="Kitchen">Option 3Kitchen</OPTION>
    <
    OPTION VALUE="Garden">Option 4Garden</OPTION>
    </
    SELECT></TD>

    <
    TD><A HREF="javascript:copyToList('possible','chosen')">--&gt;</A><BR>
    <
    A HREF="javascript:copyToList('chosen','possible')">&lt;--</A></TD>
    <
    TD><P>Chosen options:<BR>
    <
    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 COLSPAN=3 ALIGn=center><INPUT TYPE=submit VALUE="submit"></TD></TR>
    </
    TABLE>
    </
    FORM>


    // PickListDisplay.php (outputs "Gard" - first four letters in Option 4)
    // If the user picks all four options on PickList.php how do I get them to output?

    $Output  "$chosen[0] $chosen[1] $chosen[2] $chosen[3]";
    $Output explode(" "$Output);
    echo 
    $Output[0]; 
    echo 
    $Output[1]; 
    echo 
    $Output[2]; 
    echo 
    $Output[3];

    // I want this to output "House," "Garden," "Kitchen," and "Garden" if all four items
    // are chosen on PickList.php ( want to insert them into the MySQL database). 
    Thanks.
    Last edited by Volitics; Mar 15, 2005 at 15:40. Reason: typos in title
    .

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Location
    New Jersey
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to either store the values that the person picks in a hidden input field(this can be a pain) or figure out someway to send the the "options" array (an array that has all of the current options for the select element) to the server using POST or GET. Then you can use PHP to put it in the database.


    Hope this helps

    ~Mr_Bonez

  3. #3
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I already know that. What I'm trying to do is figure out how to get the "$chosen" values into an array. Once they are into an array I know how to work it from there.
    .

  4. #4
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The usual way is to place the values into a delimited string, transmit the string as a form value, then exploding or splitting the string into a new array. JavaScript offers the convenient toString() method to create a comma-delimited string from an array.

  5. #5
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The function/script above just collects the last element in the string.

    Using PHP you can use something like $chosen[ ] and put it inside the "for" loop in order to collect all of the elements within the String. I don't know how to do it with JavaScript, though.

    Where would I put the toString() function?
    .

  6. #6
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have an array, say:

    var myArr=new Array();

    then this will concatenate the array elements as a comma-delimited string and assign that string to a variable:

    var mA_str=myArr.toString();

    You could also use a for loop as in:

    for(var i=0;i<myArr.length;i++){
    i==0? mA_str=myArr[0] : mA_str+=","+myArr[i];
    }

    While the implementation is a bit different, the toString method of the Array object is similar to PHP's implode function. Perhaps a bit more like implode, the join method of the Array object allows the specification of a delimiter, as in:

    var mA_str=myArr.join(',');

    Try this:

    <script type="text/javascript">
    var myArr=new Array('a','b','c','d');
    for(var i=0;i<myArr.length;i++){
    i==0? mA_str=myArr[0] : mA_str+=","+myArr[i];
    }
    alert(mA_str+"\n"+myArr.join(',')+"\n"+myArr.toString());
    </script>
    Last edited by JVLB; Mar 15, 2005 at 23:48.

  7. #7
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help. I think that I'm going to buy the O'Reilly JavaScript book and learn more about JavaScript.

    Thanks again.
    .

  8. #8
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Flanagan's book is an excellent resource. Let me also recommend the O'Reilly book, Dynamic HTML by Danny Goodman. It is the best reference for navigating the complex relationships between JavaScript, HTML, CSS and the Document Object Model.

    By the way, I was careful to refer to toString and join as methods of the Array object, as opposed to functions. This is why they are called through an object reference, e.g. as Array.toString(), as opposed to called with the object as a parameter to a function, such as toString(array_name). Not having been conceived as an object-oriented language, PHP tends to use functions, not methods, and characteristically employs the latter form of syntax.
    Last edited by JVLB; Mar 16, 2005 at 09:02.

  9. #9
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looking back at your original question, I realize I may have left part of it unaddressed. To derive the original string directly from the selected options, rather than going through conversion to/from an array, try this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     <html>
     <head>
     <title>Untitled</title>
     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
     <script type="text/javascript">
     function grabOpts(targ_frm){
       var targ_sel=targ_frm.possible;
       var out_str="";
       var sel_ndx=targ_sel.selectedIndex;
       if(sel_ndx!=-1){
     	for(var i=sel_ndx;i<targ_sel.options.length;i++){
     	  if(targ_sel.options[i].selected==true) i==sel_ndx? out_str=targ_sel.options[i].value : out_str+=","+targ_sel.options[i].value;
     	}
       alert(out_str);
       }
     }
     </script>
     </head>
     <body>
     <form action="">
     <p>
     <SELECT NAME="possible" SIZE="4" multiple WIDTH=200 STYLE="width: 200px">
     <OPTION VALUE="House">Option 1: House</OPTION>
     <OPTION VALUE="Chamber">Option 2: Chamber</OPTION>
     <OPTION VALUE="Kitchen">Option 3: Kitchen</OPTION>
     <OPTION VALUE="Garden">Option 4: Garden</OPTION>
     </SELECT>
     </p>
     <p>
     <button onclick="grabOpts(this.form);">Show values selected</button>
     </p>
     </form>
     </body>
     </html>
    Last edited by JVLB; Mar 16, 2005 at 11:03.

  10. #10
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you just POST your form to your PHP page, doesn't $_POST["possible"] contain a comma delimited list of the selected options?

    My PHP is sucky/non existent.

  11. #11
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe you would have to give the select name="possible[]", then the selected options would be put in an array in the $_POST['possible'] variable. GET should provide similar functionality.


Bookmarks

Posting Permissions

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