Here is some code to run a javascript function on the client side when a value changes in a drop down box. In this case I have a list of dates populating a drop down box. When the date changes the value of a DIV section changes to a corresponding end date.
In the appSetting section of the web.config file:
<
add key=“StartDates“ value=“12/06/06, 02/27/07, 05/09/07, 07/03/07, 10/10/07, 01/08/08, 03/02/08“/><add key=“EndDates“ value=“10/08/07, 12/21/07, 03/18/08, 05/29/08, 08/18/08, 10/29/08, 01/27/09“/>
In the page load section:
‘ Get the start and end dates from the web.config file
Dim StartDates As Array
StartDates = ConfigurationManager.AppSettings(“StartDates”).Split(“,”)
EndDates = “‘” & ConfigurationManager.AppSettings(“EndDates”).Replace(“, “, “‘, ‘”) & “‘” ‘ format the string for a javascript array
EndDate = EndDates.Substring(0, EndDates.IndexOf(“,”)).Replace(“‘”, “”)
‘ Populate the Start Date drop down / combo box
ddlStartDate.AppendDataBoundItems = True
Dim Item As String
For Each Item In StartDates
Items = New ListItem
Items.Text = Item
Items.Value = Item
ddlStartDate.Items.Add(Items)
Next
‘ Register the javascript code to run on the client side
ddlStartDate.Attributes.Add(“onchange”, “javascript: doAction(” + ddlStartDate.ClientID + “)”)
Then in the web form:
<
table border =”0″><tr><td><asp:DropDownList ID=”ddlStartDate” runat=”server”></asp:DropDownList></td><td><div id=”EstCompDate”>Est. Comp. Date: <b><%=EndDate%></b></div></td></tr></table>Then at the bottom of the HTML of the page (just above the </html> tag):
<
script language=”javascript”>var endDates = new Array(<%=EndDates %>);
function doAction(id) {
var selection = id.options[id.selectedIndex].value;
EstCompDate.innerHTML = ‘Est. Comp. Date: <b>’ + endDates[id.selectedIndex] + ‘</b>’;
}
</script>