Multiple Select boxes with JS function, doesn't work with array

Question

I have the following code which creates two multiple selects that use js to move values between each other. The code as it is below functions but I wish to use the POST data values for the items in the select. I wish to change to so that I can get the array of values of post in PHP but when I change it to an array[] it doesn't function moving the values between the two select boxes.

<html>
<body>
<script>
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>

<form name="example" method=post action=test.php >
<table border="0" cellpadding="3" cellspacing="0">
    <tr>
        <td>
            <select multiple name="left" size="9">
                <option value="1">Row 1</option>
                <option value="2">Row 2</option>
                <option value="3">Row 3</option>                
                <option value="4">Row 4</option>
                <option value="5">Row 5</option>
            </select>
        </td>
        <td align="center" valign="middle">
            <input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.example.left,document.example.right)"><br>
            <br>
            <input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.example.right,document.example.left)">
        </td>
        <td>
            <select multiple name="right" size="9">                           
            </select>
        </td>
    </tr>   
</table>
<br><input type='submit' value='Submit'>
</form>
</body>
</html>

I wish to change so that I can get the array of values of post in PHP — Quad9x, May 11 '17 at 20:26
@Quad9x You should update the question to include that information. — Whitecat, May 11 '17 at 20:41
`document.example['right[]']` // [How to access object properties containing special characters?](http://stackoverflow.com/q/12953704/1427878) — CBroe, May 11 '17 at 20:54

Barmar · Answer 1 · 2017-05-11T21:13:45.700

If you change it to name="left[]" then you have to change document.example.left to document.example['left[]'] to match it.

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;
      }
    }
  }
}

<form name="example" method=post action=test.php>
  <table border="0" cellpadding="3" cellspacing="0">
    <tr>
      <td>
        <select multiple name="left[]" size="9">
                <option value="1">Row 1</option>
                <option value="2">Row 2</option>
                <option value="3">Row 3</option>                
                <option value="4">Row 4</option>
                <option value="5">Row 5</option>
            </select>
      </td>
      <td align="center" valign="middle">
        <input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.example['left[]'],document.example['right[]'])"><br>
        <br>
        <input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.example['right[]'],document.example['left[]'])">
      </td>
      <td>
        <select multiple name="right[]" size="9">                           
            </select>
      </td>
    </tr>
  </table>
  <br><input type='submit' value='Submit'>
</form>

You could also give them IDs, and then use document.getElementById().

I changed them but still doesn't work. Form doesn't display correctly. ` — Quad9x, May 11 '17 at 21:11

Multiple Select boxes with JS function, doesn't work with array

1 Answers1