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

  • Thread starter Mad Scientist Jr
  • Start date
M

Mad Scientist Jr

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="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
</HEAD>
<body>

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

<table>
<tbody>
<tr>
<td>
<SELECT multiple size="20" name="ListBox2" id="ListBox2"
style="WIDTH:350px">
<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="MultiLine"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="JavaScript:selectListBox2();">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.Page

#Region " Web Form Designer Generated Code "

'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub
InitializeComponent()

End Sub
Protected WithEvents Button1 As System.Web.UI.WebControls.Button
Protected WithEvents txtOut As System.Web.UI.WebControls.TextBox

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

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

#End Region

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

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e
As System.EventArgs) Handles Button1.Click
Dim iLoopRows As Int16

If (IsPostBack) Then
txtOut.Text = Request.Form.Item("ListBox2")
Else
Button1.Attributes.Add("onclick",
"JavaScript:selectListBox2();")
End If

End Sub
End Class
 
J

Juliette

Mad said:
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="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
</HEAD>
<body>

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

<table>
<tbody>
<tr>
<td>
<SELECT multiple size="20" name="ListBox2" id="ListBox2"
style="WIDTH:350px">
<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="MultiLine"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="JavaScript:selectListBox2();">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.Page

#Region " Web Form Designer Generated Code "

'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub
InitializeComponent()

End Sub
Protected WithEvents Button1 As System.Web.UI.WebControls.Button
Protected WithEvents txtOut As System.Web.UI.WebControls.TextBox

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

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

#End Region

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

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e
As System.EventArgs) Handles Button1.Click
Dim iLoopRows As Int16

If (IsPostBack) Then
txtOut.Text = Request.Form.Item("ListBox2")
Else
Button1.Attributes.Add("onclick",
"JavaScript:selectListBox2();")
End If

End Sub
End Class
Click to expand...

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.
 
M

Michael Winter

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:
Click to expand...

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]
<tr>
<td>
<a href="#" onclick="JavaScript:selectListBox2();">click me</a>
Click to expand...

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="selectListBox2();return false;">click me</a>

I've also made some comments below.

[snipped button]
<script>
Click to expand...

The type attribute is required:

<!--
Click to expand...

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

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

autoselect all items in <SELECT> control is undone when form submits 1
action_page.php form 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Multi select options in a menu 1
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Image shifts to the right when export the page to pdf 4
Loop through record in datareader in aspx for textbox other item 1
Survey details won't go through using php, ajax, Mysql 0

Members online

No members online now.
Total: 32 (members: 0, guests: 32)
Robots: 447

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,048
Latest member
verona

Latest Threads

Top