ASP Button Calling JavaScript Function

Question

I am attempting to construct my own date picker using code from several sources. Specifically, I am now attempting to have an asp:button display/hide the calendar.

What am I doing wrong?

myDate.ascx

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="myDate.ascx.vb"
    Inherits="Website.myDate" %>

<script language="javascript" type="text/javascript">
    function toggleCalendar(myID) {
        var obj = document.getElementById(myID)
        obj.style.display = (obj.style.display == "none") ? "" : "none";
    }
</script>

<asp:TextBox ID="dateText" runat="server" > </asp:TextBox>
<asp:Button ID="dateBtn" runat="server" UseSubmitBehavior="false" Text="x" />
<asp:Calendar ID="dateCal" runat="server" >

</asp:Calendar>

myDate.ascx.vb

Partial Public Class myDate
    Inherits System.Web.UI.UserControl

    Protected Sub Page_Load
      (ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        'Add OnClick event to call JavaScript to toggle calendar display'
        calBtn.Attributes.Add("OnClick", "toggleCalendar(" & cal.ClientID & ")")
    End Sub

End Class

HTML code for button (from browser)

<input type="button" name="ctl03$calBtn" value="x"
       onclick="toggleCalendar(ctl03_cal);__doPostBack('ctl03$calBtn','')" 
       id="ctl03_calBtn" />

Answer 1

It looks like you need to add a "return false;" statement to your attributes.add line.

calBtn.Attributes.Add("OnClick", "toggleCalendar(" & cal.ClientID & "); return false;")

That should prevent the postback event from firing in your webForm.

Answer 2

Since your operation is all client side. How about just definining a regular HTML button?

<input type="button" value="X" onclick='toggleCalendar("<%=cal.ClientID%>");'/>