How to get select box to show all its contents when checking from python script.

Question

I want to have two select boxes, one empty and one populated. The user will move some of the items from the populated select box to the empty select box. I have that working. What I need help on is that when the items are moved over to the empty select box and submit is pressed, no data is sent concerning the empty select box that is now populated. I have found that this is because as the person moves items over they are not kept selected. Is there something besides a select box that looks like a select box that I can use or is there some other way for me to find out what has been moved from one box to the other? I am doing the processing of the form in python and have attached the basic code that I am using.

.html:

<html>
<head>
</head>

<script language="Javascript">
function SelectMoveRows(SS1,SS2)
{
    var SelID='';
    var SelText='';
    // Move rows from SS1 to SS2 from bottom to top
    for (i=SS1.options.length - 1; i>=0; i--)
    {
        if (SS1.options[i].selected == true)
        {
            SelID=SS1.options[i].value;
            SelText=SS1.options[i].text;
            var newRow = new Option(SelText,SelID);
            SS2.options[SS2.length]=newRow;
            SS1.options[i]=null;
        }
    }
    SelectSort(SS2);
}
function SelectSort(SelList)
{
    var ID='';
    var Text='';
    for (x=0; x < SelList.length - 1; x++)
    {
        for (y=x + 1; y < SelList.length; y++)
        {
            if (SelList[x].text > SelList[y].text)
            {
                // Swap rows
                ID=SelList[x].value;
                Text=SelList[x].text;
                SelList[x].value=SelList[y].value;
                SelList[x].text=SelList[y].text;
                SelList[y].value=ID;
                SelList[y].text=Text;
            }
        }
    }
}
</script>


<body>
<form name="projectBuild" action="../cgi-bin/pythonTest.cgi" enctype="multipart/form-data" method="POST">

<table>
        <tr>
                <td align="center">
                    <SELECT NAME="selectList" style="width: 100%" MULTIPLE>
                    <!--<SELECT NAME="selectList" MULTIPLE>-->
                        <OPTION VALUE="crc">CRC</option>
                        <OPTION VALUE="vector">Vector</option>
                        <OPTION VALUE="mm">Matrix Multiply</option>
                        <OPTION VALUE="bubblesort">Bubble Sort</option>
                        <OPTION VALUE="quicksort">Quick Sort</option>
                    </SELECT>

                </td>
                <td align="center" >

                        <input type="button" name="add" value="Add       >>" onClick="SelectMoveRows(document.projectBuild.selectList,document.projectBuild.userSelections)">
                            <br>
                        <input type="button" name="remove" value="<< Remove" onClick="SelectMoveRows(document.projectBuild.userSelections,document.projectBuild.selectList)">

                </td>
                <td allign="center">
                    <SELECT NAME="userSelections" style="width: 100%" MULTIPLE>
                    <!--<SELECT NAME="userSelections" MULTIPLE>-->
                        <!-- <OPTION VALUE="placeholder">placeholder</option> -->
                    </SELECT>
                </td>

            </tr>

            <tr>
                <td>
                </td>
                <td align="center"> 
                    <input type="submit" value="Submit">
                </td>

</table>
</body>
</html>

.cgi:

#!/usr/bin/python
import cgi, os, sys, commands

myForm = cgi.FieldStorage()
pickedAcc = myForm.getvalue("userSelections")
leftAcc = myForm.getvalue("selectList")
print pickedAcc

print "Left Accelorator list: "
print leftAcc

K... deleting distracting comments! :) – Andrew Barber Dec 18 '14 at 03:22 — Andrew Barber, Dec 18 '14 at 03:22

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

Before submitting the form, loop through all the options in the userSelections select and set the selected attribute of each option to true. Modify your form as follows

<form name="projectBuild"
  onSubmit="selectAll(document.projectBuild.userSelections)"
  action="../cgi-bin/pythonTest.cgi"
  enctype="multipart/form-data"
  method="POST">

In the selectAll method, you loop through all the options and set the selected attribute to true.

Execute a JavaScript when a form is submitted
Javascript loop through ALL HTML select (See the 2nd answer)

edited May 23 '17 at 10:26

Community

1
1

answered Dec 18 '14 at 04:37

Hoa

3,179
1
25
33

is the selectAll() a javascript method? – NDEthos Dec 18 '14 at 05:20
It's a JavaScript method implemented by you in the same way that you implemented the SelectMoveRows method for the onClick event. – Hoa Dec 18 '14 at 05:26
Yeah, don't know javascript. Just feeling around in the dark. How would I do that? What main topic do I look for? – NDEthos Dec 18 '14 at 05:38
I've just added 2 references for you to get started. – Hoa Dec 18 '14 at 08:45

How to get select box to show all its contents when checking from python script.

1 Answers1