Question

I am currently trying to update a textbox using an ‘onclick’ event inside a listbox.

Basically, when setting the ‘onclick’ event attribute, I need to pass the selected listbox value. However, the issue that is happening is when everything is being built for the very first time, there is no selected value, so it tries to pass a null and errors out.

Some code…

//listbox attribute creation...
Me.listbox.Attributes("onclick") = "javascript:board_click_button('" & Me.listbox.SelectedItem.Text & "');"

If I set the SelectedValue to a specific index then every time the user clicks, regardless of what they select, the hardcoded index value is what is always returned.

Is there a way to get ‘onclick’ to do what I need it it? I didn’t post any further code since I didn’t think it would help, but I can if its needed. Thanks.

Answer 1

You need to understand the difference between server-side and client-side.

Server-side is everything that happens on the server (e.g. ASP, ASP.NET, PHP) that is used to create the HTML that is sent to the browser. It also deals with the information that is returned by the browser when the user submits stuff back (the post-back).

Client-side is everything that happens on the browser once the HTML has been received, or when user does something on the page like clicking an element.

This code is being created on the server, therefore as far as the browser is concerned, the text parameter is never going to change (split over lines for visibility)…

Me.listbox.Attributes("onclick") = "javascript:board_click_button('" 
                                   & Me.listbox.SelectedItem.Text & "');"

The browser will receive something like (simplified for visibility)…

<select onclick="javascript:board_click_button('hello world');" ...

Instead, what I think you want is this…

Me.listbox.Attributes("onclick") = "board_click_button(this.options[this.selectedIndex].text);"

What this will do is allow the javascript to use the this variable (which is the object that has caused the event, in this case the <select>) to find the currently selected item text.

(Also, please note you do not need to put javascript: at the start of onclick type events – the browser already knows it’s javascript. You only need to put it if you use javascript within the href of an <a> tag.)

UPDATE

Here is a very quick test that works correctly for me (displaying in an alert box, the text from the item that has been selected)…

<asp:ListBox runat="server" onclick="alert(this.options[this.selectedIndex].text);">
  <asp:ListItem Value="1">one</asp:ListItem>
  <asp:ListItem Value="2">two</asp:ListItem>
  <asp:ListItem Value="3">three</asp:ListItem>
</asp:ListBox>