21 users online (0 members and 21 guests)  


  Results 1 to 6 of 6

Related

  1. Need advice for form selection    Forum: PHP Forum
    Replies: 0
  2. Display Table based on selection in the Combo Box    Forum: Javascript Forum
    Replies: 0
  3. Selection of Domains    Forum: Domain Name Sales
    Replies: 0
  1. #1
    Zamees's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2003
    Posts
    19

    Multiple Selection Boxes???

    I've created a Form with multiple selection boxes. I'd like to use the
    -->
    <-- and then use the info on the right side to send to the next page to store in the database. I run into a problem where when the user selects info to go to the right side box, it won't be sent to the next page unless it is reselected. Is there a way to have it SELECTED, once the user moves it from the left side to the right side?

    Heres the code.

    THe script is written in first, followed by the html that displays the 2 Listboxes.

    function deleteOption(theSel, theIndex)
    { var selLength = theSel.length;
    if(selLength>0)
    {theSel.options[theIndex] = null;}
    }

    function moveOptions(theSelFrom, theSelTo)
    { var selLength = theSelFrom.length;
    var selectedText = new Array();
    var selectedValues = new Array();
    var selectedCount = 0;
    var i;
    // Find the selected Options in reverse order
    // and delete them from the 'from' Select.
    for(i=selLength-1; i>=0; i--)
    { if(theSelFrom.options[i].selected)
    {
    selectedText[selectedCount] = theSelFrom.options[i].text;
    selectedValues[selectedCount] = theSelFrom.options[i].value;
    deleteOption(theSelFrom, i);
    selectedCount++;
    }
    }

    // Add the selected text/values in reverse order.
    // This will add the Options to the 'to' Select
    // in the same order as they were in the 'from' Select.
    for(i=selectedCount-1; i>=0; i--)
    {
    addOption(theSelTo, selectedText[i], selectedValues[i]);
    }

    if(NS4) history.go(0);
    }

    //-->
    </script>




    <form method=post action="boxtest2.asp">
    <table border="0">
    <tr>
    <td>
    <select name="sel1" size="10" multiple>
    <option value="1">Left1</option>
    <option value="2" selected>Left2</option>
    <option value="3">Left3</option>
    <option value="4">Left4</option>
    <option value="5">Left5</option>
    </select>
    </td>
    <td align="center" valign="middle">
    <input type="button" value="-->" onClick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
    <input type="button" value="<--" onClick="moveOptions(this.form.sel2, this.form.sel1);" />
    </td>
    <td>
    <select name="sel2" size="10" multiple>
    <option value="1a">Right1</option>
    <option value="2a" selected>Right2</option>
    <option value="3a">Right3</option>
    <option value="4a">Right4</option>
    <option value="6a">Right5</option>
    <option value="7a">Right5</option>
    <option value="8a">Right5</option>
    <option value="9a">Right5</option>


    </select>
    </td>
    </tr>
    </table>
    <input type=submit value=submit>
    </form>

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Hiya, welcome to the forums.

    Its a nice script, it has potential. However, in the version above, my items are not 'moving' across, they are just disappearing.

    Is the above the complete code? I am using IE6 sp1 on winXP.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    Zamees's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2003
    Posts
    19
    You're right, I musta missed the first function, the addOption. Just add this to the top

    function addOption(theSel, theText, theValue)
    {
    var newOpt = new Option(theText, theValue);
    var selLength = theSel.length;
    theSel.options[selLength] = newOpt;
    }



    I made two of the selections selected at default, but once they are moved to the other side, they are unselected. I can reselect them, and whatever is selected and then submitted is then passed on correctly. But what Im essentially trying to do is pass all info in one box on to the next page. And let users remove options from this box before passing, which elimates the option of using a textbox.


    Here is the boxtest2 code which is an asp file

    <%
    Dim intNumberSelected
    Dim strSelecteditems
    Dim arrSelecteditems
    Dim I

    intNumberSelected = Request.Form("sel2").Count
    strSelecteditems = Request.Form("sel2")
    arrSelecteditems = Split(strSelecteditems, ", ")
    %>
    <P>You selected <B><%= intNumberSelected %></B> items(s).</P>
    <P>Request.Form("sel2") returned:</P>
    <P><FONT SIZE="-1"><B><%= strSelecteditems %></B></FONT></P>
    The contents of that array are shown in the table below:</P>
    <TABLE BORDER="1">
    <TR>
    <TH>Array Element <FONT COLOR="#FF0000">*</FONT></TH>
    <TH>Value</TH>
    </TR>
    <%
    For I = LBound(arrSelecteditems) To UBound(arrSelecteditems)
    %>
    <TR>
    <TD><%= I %></TD>
    <TD><%= arrSelecteditems(I) %></TD>
    </TR>
    <%
    Next
    %>
    </TABLE>
    Last edited by Zamees; 09-30-2003 at 05:23 AM.

  4. #4
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Amended version -

    Code:
    <script language="JavaScript">
    
    function selectAllOptions(obj) {
    	for (var i=0; i<obj.options.length; i++) {
    		obj.options[i].selected = true;
    		}
    	}
    
    
    function addOption(theSel, theText, theValue)
    {
    var newOpt = new Option(theText, theValue);
    var selLength = theSel.length;
    theSel.options[selLength] = newOpt;
    }
    
    
    function deleteOption(theSel, theIndex)
    { var selLength = theSel.length;
    if(selLength>0)
    {theSel.options[theIndex] = null;}
    }
    
    function moveOptions(theSelFrom, theSelTo)
    { var selLength = theSelFrom.length;
    var selectedText = new Array();
    var selectedValues = new Array();
    var selectedCount = 0;
    var i;
    // Find the selected Options in reverse order
    // and delete them from the 'from' Select.
    for(i=selLength-1; i>=0; i--)
    { if(theSelFrom.options[i].selected)
    {
    selectedText[selectedCount] = theSelFrom.options[i].text;
    selectedValues[selectedCount] = theSelFrom.options[i].value;
    deleteOption(theSelFrom, i);
    selectedCount++;
    
    }
    
    }
    
    // Add the selected text/values in reverse order.
    // This will add the Options to the 'to' Select
    // in the same order as they were in the 'from' Select.
    for(i=selectedCount-1; i>=0; i--)
    {
    addOption(theSelTo, selectedText[i], selectedValues[i]);
    }
    selectAllOptions(theSelTo);
    if(NS4) history.go(0);
    
    }
    
    //-->
    </script>
    
    
    
    
    <form method=post action="boxtest2.asp">
    <table border="0">
    <tr>
    <td>
    <select name="sel1" size="10" multiple>
    <option value="1">Left1</option>
    <option value="2" selected>Left2</option>
    <option value="3">Left3</option>
    <option value="4">Left4</option>
    <option value="5">Left5</option>
    </select>
    </td>
    <td align="center" valign="middle">
    <input type="button" value="-->" onClick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
    <input type="button" value="<--" onClick="moveOptions(this.form.sel2, this.form.sel1);" />
    </td>
    <td>
    <select name="sel2" size="10" multiple>
    <option value="1a">Right1</option>
    <option value="2a" selected>Right2</option>
    <option value="3a">Right3</option>
    <option value="4a">Right4</option>
    <option value="6a">Right5</option>
    <option value="7a">Right5</option>
    <option value="8a">Right5</option>
    <option value="9a">Right5</option>
    
    
    </select>
    </td>
    </tr>
    </table>
    <input type=submit value=submit>
    </form>
    Basically, I have added a function called selectAllOptions , plugged this into the move function, and it seems to work fine.

    I cannot take credit for this new function I got it from http://www.mattkruse.com/javascript/selectbox/source.html

    Seems a useful collection of functions there. Hope that helps.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  5. #5
    Zamees's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2003
    Posts
    19
    Hey Dean, Thank you VERY MUCH. That function helped out greatly. I was missing the = true when I played around with it, was just adding the .selected and wondered why it didnt make anything selected. As for the issue, I changed the code a bit to get the full logic working. What I wanted to do is have users add or remove items into the box on the right, and then submit that to the next form. I modified the code so that once you hit submit, it selects everything in the rightside box, instead of selected everything in whichever box the thisselto was headed. Heres the change...

    <input type=submit value=submit onClick="selectAllOptions(this.form.sel2);" />

    Plus I removed the selectAllOptions(theSelTo); line.

    Works like a charm, thanx for all your help again.

  6. #6
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    glad its working
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?



Tags for this Thread