Question

I have two list controls in my asp.net page and am populating the second list control using javascript. Problem is the script executes and i can see the value moved from first list box (ConfiguredOrgListBox) to second list box(SelectedOrgListBox) but when i try to save using submit button i find my second list as empty and first list box as it was earlier. Below is the script and mark up.

    //call this method to register the script    
    private void CreateMoveOrganizationScript(StringBuilder sb) {
        sb.Append( @"<script language=javascript type=text/javascript>;
                    function moveOrganisation() {");            
        sb.Append( @"var source = document.getElementById('"+ ConfiguredOrgListBox.ClientID  +@"');
                    var target = document.getElementById('"+SelectedOrgListBox.ClientID+ @"');
                    if ((source != null) && (target != null)) {
                    var newOption = new Option();
                    newOption.text = source.options[source.options.selectedIndex].text;
                    newOption.value = source.options[source.options.selectedIndex].value;

                    target.options[target.length] = newOption;
                    source.remove(source.options.selectedIndex)  ;
                    }            
                } </script>");            
    }

Markup

      <asp:Label ID="ConfiguredOrgLabel" runat="server" Text="Available Organizations"></asp:Label><br />
      <asp:ListBox ID="ConfiguredOrgListBox" runat="server" Width="98%" Height="100px"></asp:ListBox>
       <input id="MoveOrgRight" type="button" value=">>" onclick="moveOrganisation()" />
      <asp:Label ID="SelectedOrgLabel" runat="server" Text="Selected VNA Organizations"></asp:Label><br />
      <asp:ListBox ID="SelectedOrgListBox" runat="server" Width="98%" Height="100px"></asp:ListBox>

Please let me know what I am doing wrong

Regards,
JeeZ

Answer 1

According to this, it’s because the list box doesn’t post back to tell the back-end that it’s changed. They use a hidden field which holds info on what changes were made with JavaScript and then on postback it updates the back-end.