How to ref web form controls in client side event handler?

[Eric]

I have a drop down list with an associated label. I want to take the
selectedValue of the list and populate the text of the label when the value
in the list is changed. I havent figured out how to access the controls
through the script, however.
Here's what I have:

In the ASPX file:
<script>
function OnSelectedIndexChanged()
{window.document.Form1.lblLogIDDate.Text =
window.document.Form1.ddlLogID.SelectedValue;}
</script>
with the following in the Page_Load function:
Me.ddlLogID.Attributes.Add("onchange", "OnSelectedIndexChanged();")

I know the handler fires, but I keep getting errors when it does.
Variations on "xxx" is null or not a valid object. In the above example it
would be ""window.document.Form1.ddlLogIDDate" is null or not a valid
object"

I've tried window.document.Forms(0).ddlLogIDDate,
window.document.Form1("lblLogIDDate"), and other variations but cant find
the right combo.

Can anyone help?

[Ken Cox [Microsoft MVP]]

Hi Eric,

It looks like you're trying to mix server-side events and client-side code
in a way that is going to get you into trouble. You'd be best advised to use
the server-side event unless causing a postback is really a problem for you.

Here's an example of what I think you might be trying to accomplish:

Private Sub Page_Load _
(ByVal sender As System.Object, _
ByVal e As System.EventArgs) _
Handles MyBase.Load
If Not IsPostBack Then
Dim intCounter As Integer
For intCounter = 0 To 5
ddlLogID.Items.Add _
(Now.AddDays(intCounter).ToLongDateString)
Next
End If
End Sub

Private Sub ddlLogID_SelectedIndexChanged _
(ByVal sender As System.Object, _
ByVal e As System.EventArgs) _
Handles ddlLogID.SelectedIndexChanged
lblLogIDDate.Text = ddlLogID.SelectedItem.Text
End Sub

<P>
<asp:Label id="lblLogIDDate" runat="server"></asp:Label></P>
<P>
<asp:DropDownList id="ddlLogID" runat="server"
AutoPostBack="True"></asp:DropDownList></P>

Let us know if this helps?

Ken
Microsoft MVP [ASP.NET]

"Eric" <er**@nospam.com> wrote in message
news:%2****************@tk2msftngp13.phx.gbl...

I have a drop down list with an associated label. I want to take the
selectedValue of the list and populate the text of the label when the
value
in the list is changed. I havent figured out how to access the controls
through the script, however.
Here's what I have:

In the ASPX file:
<script>
function OnSelectedIndexChanged()
{window.document.Form1.lblLogIDDate.Text =
window.document.Form1.ddlLogID.SelectedValue;}
</script>
with the following in the Page_Load function:
Me.ddlLogID.Attributes.Add("onchange", "OnSelectedIndexChanged();")

I know the handler fires, but I keep getting errors when it does.
Variations on "xxx" is null or not a valid object. In the above example
it
would be ""window.document.Form1.ddlLogIDDate" is null or not a valid
object"

I've tried window.document.Forms(0).ddlLogIDDate,
window.document.Form1("lblLogIDDate"), and other variations but cant find
the right combo.

Can anyone help?

[bruce barker]

on the client there are no .Text or .SelectedValue properties. aslo if
lblLogIDDate is label, then its rendered as a span.

<script>
function OnSelectedIndexChanged(e)
{
var text = e.options[e.selectedIndex].value;

// if lblLogIDDate is a textbox

document.getElementById('lblLogIDDate').value = text;

// if lblLogIDDate is a label

document.getElementById('lblLogIDDate').innerText = text;
}

</script>

use the following in the Page_Load function:
Me.ddlLogID.Attributes.Add("onchange", "OnSelectedIndexChanged(this);")


"Eric" <er**@nospam.com> wrote in message
news:%2****************@tk2msftngp13.phx.gbl...
| I have a drop down list with an associated label. I want to take the
| selectedValue of the list and populate the text of the label when the
value
| in the list is changed. I havent figured out how to access the controls
| through the script, however.
| Here's what I have:
|
| In the ASPX file:
| <script>
| function OnSelectedIndexChanged()
| {window.document.Form1.lblLogIDDate.Text =
| window.document.Form1.ddlLogID.SelectedValue;}
| </script>
| with the following in the Page_Load function:
| Me.ddlLogID.Attributes.Add("onchange", "OnSelectedIndexChanged();")
|
| I know the handler fires, but I keep getting errors when it does.
| Variations on "xxx" is null or not a valid object. In the above example
it
| would be ""window.document.Form1.ddlLogIDDate" is null or not a valid
| object"
|
| I've tried window.document.Forms(0).ddlLogIDDate,
| window.document.Form1("lblLogIDDate"), and other variations but cant find
| the right combo.
|
|
|
| Can anyone help?
|
|

[karpagam]

Try the following code in the ASPX page
// Since label is rendered as Span element, to display the selected value in
label,
// set the innerText property.

<asp:Label id="Label1" style="Z-INDEX: 101; LEFT: 167px; POSITION: absolute;
TOP: 346px" runat="server" Width="252px"></asp:Label>
<asp:DropDownList id="DropDownList1" style="Z-INDEX: 102; LEFT: 54px;
POSITION: absolute; TOP: 300px" runat="server" onchange="callChange();">
<asp:ListItem Value="Item1">Item1</asp:ListItem>
<asp:ListItem Value="Item2">Item2</asp:ListItem>
<asp:ListItem Value="Item3">Item3</asp:ListItem>
</asp:DropDownList>

<script language="javascript">
function callChange()
{
var index = document.getElementById("DropDownList1").selectedI ndex;
var str = document.getElementById("DropDownList1")[index].value;
document.getElementById("Label2").innerText = str;
}
</script>
"Eric" wrote:

I have a drop down list with an associated label. I want to take the
selectedValue of the list and populate the text of the label when the value
in the list is changed. I havent figured out how to access the controls
through the script, however.
Here's what I have:

In the ASPX file:
<script>
function OnSelectedIndexChanged()
{window.document.Form1.lblLogIDDate.Text =
window.document.Form1.ddlLogID.SelectedValue;}
</script>
with the following in the Page_Load function:
Me.ddlLogID.Attributes.Add("onchange", "OnSelectedIndexChanged();")

I know the handler fires, but I keep getting errors when it does.
Variations on "xxx" is null or not a valid object. In the above example it
would be ""window.document.Form1.ddlLogIDDate" is null or not a valid
object"

I've tried window.document.Forms(0).ddlLogIDDate,
window.document.Form1("lblLogIDDate"), and other variations but cant find
the right combo.

Can anyone help?