autoselect all items in <SELECT> control is undone when form submits

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Mad Scientist Jr

    autoselect all items in <SELECT> control is undone when form submits

    I'm trying to get javascipt select all items in a HTML form <SELECT>
    control and submit the form to an asp.net page. For some reason when
    the link is clicked, you can see the items all get selected, but then
    they are somehow unselected as the form posts. Any idea? My Html and
    ..net code follows:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <title>test SELECT</title>
    <meta content="Micros oft Visual Studio .NET 7.1" name="GENERATOR ">
    <meta content="Visual Basic .NET 7.1" name="CODE_LANG UAGE">
    <meta content="JavaSc ript" name="vs_defaul tClientScript">
    <meta content="http://schemas.microso ft.com/intellisense/ie5"
    name="vs_target Schema">
    </HEAD>
    <body>

    <form id="Form1" method="post" runat="server">

    <table>
    <tbody>
    <tr>
    <td>
    <SELECT multiple size="20" name="ListBox2" id="ListBox2"
    style="WIDTH:35 0px">
    <OPTION selected value="Value 1">Text 1</OPTION>
    <OPTION>Text 2</OPTION>
    <OPTION>Text 3</OPTION>
    <OPTION>Text 4</OPTION>
    <OPTION>Text 5</OPTION>
    <OPTION>Text 6</OPTION>
    <OPTION>Text 7</OPTION>
    <OPTION>Final option</OPTION>
    </SELECT>
    </td>
    </tr>
    <tr>
    <td>
    <asp:TextBox id="txtOut" runat="server" Columns="60" Rows="10"
    TextMode="Multi Line"></asp:TextBox>
    </td>
    </tr>
    <tr>
    <td>
    <a href="#" onclick="JavaSc ript:selectList Box2();">click me</a>
    &nbsp;
    <asp:Button id="Button1" runat="server"
    Text="Button"></asp:Button>
    </td>
    </tr>
    </tbody>
    </table>

    <script>
    <!--
    function selectListBox2( )
    {
    var iLoop;
    for (iLoop = 0; iLoop < document.Form1. ListBox2.length ; iLoop++)
    {
    document.Form1. ListBox2[iLoop].selected = true;
    }
    document.Form1. submit();
    }
    // -->
    </script>

    </form>

    </body>
    </HTML>








    Public Class test_DualList
    Inherits System.Web.UI.P age

    #Region " Web Form Designer Generated Code "

    'This call is required by the Web Form Designer.
    <System.Diagnos tics.DebuggerSt epThrough()> Private Sub
    InitializeCompo nent()

    End Sub
    Protected WithEvents Button1 As System.Web.UI.W ebControls.Butt on
    Protected WithEvents txtOut As System.Web.UI.W ebControls.Text Box

    'NOTE: The following placeholder declaration is required by the
    Web Form Designer.
    'Do not delete or move it.
    Private designerPlaceho lderDeclaration As System.Object

    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As
    System.EventArg s) Handles MyBase.Init
    'CODEGEN: This method call is required by the Web Form
    Designer
    'Do not modify it using the code editor.
    InitializeCompo nent()
    End Sub

    #End Region

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
    System.EventArg s) Handles MyBase.Load
    'Put user code to initialize the page here
    End Sub

    Private Sub Button1_Click(B yVal sender As System.Object, ByVal e
    As System.EventArg s) Handles Button1.Click
    Dim iLoopRows As Int16

    If (IsPostBack) Then
    txtOut.Text = Request.Form.It em("ListBox2")
    Else
    Button1.Attribu tes.Add("onclic k",
    "JavaScript:sel ectListBox2();" )
    End If

    End Sub
    End Class
  • Juliette

    #2
    Re: autoselect all items in &lt;SELECT&g t; control is undone when form submits

    Mad Scientist Jr wrote:[color=blue]
    >
    > I'm trying to get javascipt select all items in a HTML form <SELECT>
    > control and submit the form to an asp.net page. For some reason when
    > the link is clicked, you can see the items all get selected, but then
    > they are somehow unselected as the form posts. Any idea? My Html and
    > .net code follows:
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    > <HTML>
    > <HEAD>
    > <title>test SELECT</title>
    > <meta content="Micros oft Visual Studio .NET 7.1" name="GENERATOR ">
    > <meta content="Visual Basic .NET 7.1" name="CODE_LANG UAGE">
    > <meta content="JavaSc ript" name="vs_defaul tClientScript">
    > <meta content="http://schemas.microso ft.com/intellisense/ie5"
    > name="vs_target Schema">
    > </HEAD>
    > <body>
    >
    > <form id="Form1" method="post" runat="server">
    >
    > <table>
    > <tbody>
    > <tr>
    > <td>
    > <SELECT multiple size="20" name="ListBox2" id="ListBox2"
    > style="WIDTH:35 0px">
    > <OPTION selected value="Value 1">Text 1</OPTION>
    > <OPTION>Text 2</OPTION>
    > <OPTION>Text 3</OPTION>
    > <OPTION>Text 4</OPTION>
    > <OPTION>Text 5</OPTION>
    > <OPTION>Text 6</OPTION>
    > <OPTION>Text 7</OPTION>
    > <OPTION>Final option</OPTION>
    > </SELECT>
    > </td>
    > </tr>
    > <tr>
    > <td>
    > <asp:TextBox id="txtOut" runat="server" Columns="60" Rows="10"
    > TextMode="Multi Line"></asp:TextBox>
    > </td>
    > </tr>
    > <tr>
    > <td>
    > <a href="#" onclick="JavaSc ript:selectList Box2();">click me</a>
    > &nbsp;
    > <asp:Button id="Button1" runat="server"
    > Text="Button"></asp:Button>
    > </td>
    > </tr>
    > </tbody>
    > </table>
    >
    > <script>
    > <!--
    > function selectListBox2( )
    > {
    > var iLoop;
    > for (iLoop = 0; iLoop < document.Form1. ListBox2.length ; iLoop++)
    > {
    > document.Form1. ListBox2[iLoop].selected = true;
    > }
    > document.Form1. submit();
    > }
    > // -->
    > </script>
    >
    > </form>
    >
    > </body>
    > </HTML>
    >
    > Public Class test_DualList
    > Inherits System.Web.UI.P age
    >
    > #Region " Web Form Designer Generated Code "
    >
    > 'This call is required by the Web Form Designer.
    > <System.Diagnos tics.DebuggerSt epThrough()> Private Sub
    > InitializeCompo nent()
    >
    > End Sub
    > Protected WithEvents Button1 As System.Web.UI.W ebControls.Butt on
    > Protected WithEvents txtOut As System.Web.UI.W ebControls.Text Box
    >
    > 'NOTE: The following placeholder declaration is required by the
    > Web Form Designer.
    > 'Do not delete or move it.
    > Private designerPlaceho lderDeclaration As System.Object
    >
    > Private Sub Page_Init(ByVal sender As System.Object, ByVal e As
    > System.EventArg s) Handles MyBase.Init
    > 'CODEGEN: This method call is required by the Web Form
    > Designer
    > 'Do not modify it using the code editor.
    > InitializeCompo nent()
    > End Sub
    >
    > #End Region
    >
    > Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
    > System.EventArg s) Handles MyBase.Load
    > 'Put user code to initialize the page here
    > End Sub
    >
    > Private Sub Button1_Click(B yVal sender As System.Object, ByVal e
    > As System.EventArg s) Handles Button1.Click
    > Dim iLoopRows As Int16
    >
    > If (IsPostBack) Then
    > txtOut.Text = Request.Form.It em("ListBox2")
    > Else
    > Button1.Attribu tes.Add("onclic k",
    > "JavaScript:sel ectListBox2();" )
    > End If
    >
    > End Sub
    > End Class[/color]

    Have you tried running the code with the javascript function in the HEAD
    of the page instead of inline ?
    If not, please try that first.

    J.

    Comment

    • Michael Winter

      #3
      Re: autoselect all items in &lt;SELECT&g t; control is undone when form submits

      On 5 Mar 2004 12:07:18 -0800, Mad Scientist Jr <usenet_daughte r@yahoo.com>
      wrote:
      [color=blue]
      > I'm trying to get javascipt select all items in a HTML form <SELECT>
      > control and submit the form to an asp.net page. For some reason when
      > the link is clicked, you can see the items all get selected, but then
      > they are somehow unselected as the form posts. Any idea? My Html and
      > .net code follows:[/color]

      You could have posted a lot less code (what I've left below is
      sufficient), especially omitting the VBScript. Also, please only use two
      spaces when indenting you code. Eight characters makes it difficult to
      read: four should be the maximum.

      [snipped menu and text box]
      [color=blue]
      > <tr>
      > <td>
      > <a href="#" onclick="JavaSc ript:selectList Box2();">click me</a>[/color]

      I think your problem is here. It is quite likely that once the
      selectListBox2( ) function has executed, the browser tries to navigate to
      '#', resetting the form in the process. Try:

      <a href="" onclick="select ListBox2();retu rn false;">click me</a>

      I've also made some comments below.

      [snipped button]
      [color=blue]
      > <script>[/color]

      The type attribute is required:

      <script type="text/javascript">
      [color=blue]
      > <!--[/color]

      Hiding scripts is a practice that is now obsolete. Remove the SGML comment
      delimiters.
      [color=blue]
      > function selectListBox2( )
      > {
      > var iLoop;
      > for (iLoop = 0; iLoop < document.Form1. ListBox2.length ; iLoop++)
      > {
      > document.Form1. ListBox2[iLoop].selected = true;
      > }
      > document.Form1. submit();
      > }[/color]

      This can be better implemented as:

      function selectListBox2( ) {
      var f = document.form1, e = f.elements, n = e.length;

      for( var i = 0; i < n; ++i )
      e[ i ].selected = true;
      f.submit();
      }

      The repeated property accesses in the original add quite an overhead.

      My final comment is to consider more descriptive names. selectListBox2 and
      form1, as well as similar instances in the document, are *very* bad
      identifier names.

      [snipped VBScript]

      Mike

      --
      Michael Winter
      M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

      Comment

      Working...