Problems on adding javascript into the asp.net page 1

[Crazyec]

Dears, my case is like here:
In the form, I have 2 text box control, 2 hyperlink control and a drop down list.
The 2 hyperlink control is actually for pop-up a calendar window and user can select the date on the calendar to that 2 text boxes.(Use Javascript)

I wanna add a javascript to the submit button of the form which for open a window for a report.

The problem is, the textbox textchanged even is not actived by the javascript "editing". (I have already make the text box AutoPostBack=true, and I check that it works when I type the date in the textbox by myself)

CODE:

<script runat="server">

    Sub Page_Load
    
        hlStartDate.NavigateUrl = "Javascript:pickDate('" & txtStartDate.ClientID & "')"
        hlEndDate.NavigateUrl = "Javascript:pickDate('" & txtEndDate.ClientID & "')"
    End Sub

    Sub PortList_SelectedIndexChanged(sender As Object, e As EventArgs)
        ButtonSend.Attributes.Add ("onClick", "javascript:window.open('generate_Report.asp?txtStartDate=" & txtStartDate.text & "&txtEndDate=" & txtEndDate.text & "&CountryList=" & CountryList.text & "')")
    End Sub
    
    Sub txtStartDate_TextChanged(sender As Object, e As EventArgs)
    ButtonSend.Attributes.Add ("onClick", "javascript:window.open('generate_Report.asp?txtStartDate=" & txtStartDate.text & "&txtEndDate=" & txtEndDate.text & "&CountryList=" & CountryList.text & "')")
    End Sub
    
    Sub txtEndDate_TextChanged(sender As Object, e As EventArgs)
        label1.text = "End Change"
    ButtonSend.Attributes.Add ("onClick", "javascript:window.open('generate_Report.asp?txtStartDate=" & txtStartDate.text & "&txtEndDate=" & txtEndDate.text & "&CountryList=" & CountryList.text & "')")
    End Sub

</script>

HTML:

<form id="form1" runat="server">
<tr>
    <td class="ReportLabel" style="WIDTH: 100px">
     <asp:Label id="lblStartDate" runat="server" cssclass="label">Start Date</asp:Label></td>
    <td class="ReportField" colspan="2">                    
      <asp:HyperLink id="hlStartDate" runat="server" ImageUrl="Images\date-picker.gif"></asp:HyperLink>
      <asp:TextBox id="txtStartDate" runat="server" CssClass="textbox" AutoPostBack="True" OnTextChanged="txtStartDate_TextChanged"></asp:TextBox></td>
</tr>
<tr>
    <td class="ReportLabel" style="WIDTH: 100px">
      <asp:Label id="lblEndDate" runat="server" cssclass="label">End Date</asp:Label></td>
    <td class="ReportField" colspan="2">
      <asp:HyperLink id="hlEndDate" tabIndex="1" runat="server" ImageUrl="Images\date-picker.gif"></asp:HyperLink>
      <asp:TextBox id="txtEndDate" runat="server" CssClass="textbox" AutoPostBack="True" OnTextChanged="txtEndDate_TextChanged"></asp:TextBox></td>
</tr>
<tr>
   <td class="ReportLabel" style="WIDTH: 100px">
       <asp:Label id="lblCountry" runat="server" cssclass="label">Country</asp:Label></td>
   <td class="ReportField" colspan="2">
     <asp:SqlDataSource id="CountryDataSource" Runat="server" ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:connection1 %>" SelectCommand="SELECT * FROM [tblCountry]"></asp:SqlDataSource>
     <asp:DropDownList id="CountryList" runat="server" CssClass="dropdownbox" DataSourceID="CountryDataSource" DataValueField="CountryCode" DataTextField="CountryName" AppendDataBoundItems="True" OnSelectedIndexChanged="CountryList_SelectedIndexChanged" AutoPostBack="True">
      <asp:ListItem>All</asp:ListItem>
      </asp:DropDownList></td>
</tr>
<tr>
   <td>&nbsp;</td>
   <td colspan="2">&nbsp;&nbsp; 
     <asp:Button id="ButtonSend" runat="server" Text="Send"></asp:Button></td>
</tr>

If there are any thread which is good reference for me, please let me know. I have try some keyword search, but fail to get the solution. (or suggest some keyword please)
Thank you very much.

 

[Isadore]

Crazy - I think you might make some forward progress on this by extracting out your javascript from the TextedChanged Subs; the pop up windows can be triggered ClientSide by Javascript. Do you see any reason why this is not a good idea?

 

[Crazyec]

Isadore, Sorry, I afraid I misunderstand your meaning.
I guess you wanna say ... use client side javascript to get the field values and do the open window process. Am I right?

 

[Isadore]

Well, what you want to do is easy enough; just have to lay out a strategy. My gut feeling was that you want the javascript outside of the code behind, and doing its thing independent of the code-behind. Brief your business logic, and we'll throw u some code and knock this out.

In answer to your question, yes.

 

[Crazyec]

Thank you, Isadore.
I really make the simple thing complex.
It finally works.

 

[Isadore]

No problem Crazyec; if you have any problemos, just post back here and we'll knock 'em out.

 

[fayevalentine]

Hello.
I have the same problem but I did not understand the solution.

Could anyone explain me?

Thank You.

 

[Isadore]

fay: this may help, the code (one way to do this; search on Calendar and you'll see other twists on this);
'======= Main aspx page ==========

..javascript..accepting control name and date value..
<script...>
function GetDate(CtrlName, SampleDate){   
  ChildWindow = window.open('Calendar.aspx?FormName=' + document.forms[0].name + '&CtrlName=' + CtrlName + '&SDate=' + SampleDate, "PopUpCalendar", "width=270,height=300,top=200,left=200,toolbars=no,scrollbars=no,status=no,resizable=no");    
}  
</script>
....
....within the html same page....
<Font size="4" color="blue">Sample Date:</Font>&nbsp;<asp:textbox id="txtSampleDate" runat="server" ReadOnly="true" Width="70px"/>
 <a href="javascript:GetDate('txtSampleDate','<%=Request.QueryString("SampleDate")%>')">
<img src="Images/SmallCalendar.gif" border="0" width="16" height="16" /></a>

==================================

'======= Calendar aspx page ==========

<%@ Page Language="VB"%>
<script runat="server">
    Public strFormName As String
    Public strCtrlName As String
    Public strSelectedDate As String    
    Sub Page_Load(Sender As Object, E As EventArgs) 
       If Not IsPostBack Then
          myCalendar.SelectedDate = System.DateTime.Parse(Request.QueryString("SDate")) 
          myCalendar.VisibleDate = System.DateTime.Parse(Request.QueryString("SDate"))    
         '-------------------------------------------------------------------
         ' Set the ddList of Month and Year to QueryString Month and Year
         '-------------------------------------------------------------------    
          ddlMonth.Items.FindByValue(Month(Request.QueryString("SDate"))).Selected = True
          ddlYear.Items.FindByValue(Year(Request.QueryString("SDate"))).Selected = True
        End If 
         '-------------------------------------------------------------------
         ' Set the Selected Date to a temp String
         ' Set FormName and Control Name from the values in QueryString
         '-------------------------------------------------------------------    
         strSelectedDate = myCalendar.SelectedDate.ToString("MM/dd/yyyy")
         strFormName = Request.QueryString("FormName")
         strCtrlName = Request.QueryString("CtrlName")   
    End Sub
    
    Sub myCalendar_SelectionChanged(sender As Object, e As EventArgs)    
         '-------------------------------------------------------------------
         ' Change the Temp Selected Date Object if change is made
         '-------------------------------------------------------------------    
         strSelectedDate = myCalendar.SelectedDate.ToString("MM/dd/yyyy")
    End Sub    
    
    Sub ddl_SelectedIndexChanged(Sender As Object, e As EventArgs)    
         '-------------------------------------------------------------------
         ' Change the VisibleDate of the Calendar according to 
         ' the DropDownList dynamically
         '-------------------------------------------------------------------    
         myCalendar.VisibleDate = New DateTime(CInt(ddlYear.SelectedItem.Value), CInt(ddlMonth.SelectedItem.Value), 1)    
    End Sub

</script>
<html>
<head>
<script language="Javascript">
 function ReturnDate(){
   window.opener.document.forms["<%= strFormName %>"].elements["<%= strCtrlName %>"].value = "<%= strSelectedDate %>";
   window.close();
 }        
function Close(){
  window.close();
}
</script>
</head>
<title>Activity Meeting Date</title>
<body>
    <form runat="server">
        <table>
            <tr>
                <td align="Center">
                    Month:
                    <asp:DropDownList id="ddlMonth" runat="server" OnSelectedIndexChanged="ddl_SelectedIndexChanged" AutoPostBack="True">
                        <asp:ListItem Value="1">January</asp:ListItem>
                        <asp:ListItem Value="2">February</asp:ListItem>
                        <asp:ListItem Value="3">March</asp:ListItem>
                        <asp:ListItem Value="4">April</asp:ListItem>
                        <asp:ListItem Value="5">May</asp:ListItem>
                        <asp:ListItem Value="6">June</asp:ListItem>
                        <asp:ListItem Value="7">July</asp:ListItem>
                        <asp:ListItem Value="8">August</asp:ListItem>
                        <asp:ListItem Value="9">September</asp:ListItem>
                        <asp:ListItem Value="10">October</asp:ListItem>
                        <asp:ListItem Value="11">November</asp:ListItem>
                        <asp:ListItem Value="12">December</asp:ListItem>
                    </asp:DropDownList>
                    &nbsp;
                    Year:
                    <asp:DropDownList id="ddlYear" runat="server" OnSelectedIndexChanged="ddl_SelectedIndexChanged" AutoPostBack="True">
                        <asp:ListItem Value="1993">1993</asp:ListItem>
                        <asp:ListItem Value="1994">1994</asp:ListItem>
                        <asp:ListItem Value="1995">1995</asp:ListItem>
                        <asp:ListItem Value="1996">1996</asp:ListItem>
                        <asp:ListItem Value="1997">1997</asp:ListItem>
                        <asp:ListItem Value="1998">1998</asp:ListItem>
                        <asp:ListItem Value="1999">1999</asp:ListItem>
                        <asp:ListItem Value="2000">2000</asp:ListItem>
                        <asp:ListItem Value="2001">2001</asp:ListItem>
                        <asp:ListItem Value="2002">2002</asp:ListItem>
                        <asp:ListItem Value="2003">2003</asp:ListItem>
                        <asp:ListItem Value="2004">2004</asp:ListItem>
                        <asp:ListItem Value="2005">2005</asp:ListItem>
                        <asp:ListItem Value="2006">2006</asp:ListItem>
                    </asp:DropDownList>
               </td>
            </tr>
            <tr>
                <td align="Center">
                    <asp:Calendar id="myCalendar" runat="server" BorderWidth="1px" BackColor="#FFFFCC" Width="220px" DayNameFormat="FirstLetter" ForeColor="#663399" Height="200px" Font-Size="8pt" Font-Names="Verdana" BorderColor="#FFCC66" ShowGridLines="True" OnSelectionChanged="myCalendar_SelectionChanged">
                        <SelectorStyle backcolor="#FFCC66"></SelectorStyle>
                        <NextPrevStyle font-size="9pt" forecolor="#FFFFCC"></NextPrevStyle>
                        <DayHeaderStyle height="1px" backcolor="#FFCC66"></DayHeaderStyle>
                        <SelectedDayStyle font-bold="True" backcolor="#CCCCFF"></SelectedDayStyle>
                        <TitleStyle font-size="9pt" font-bold="True" forecolor="#FFFFCC" backcolor="#990000"></TitleStyle>
                        <OtherMonthDayStyle forecolor="#CC9966"></OtherMonthDayStyle>
                    </asp:Calendar>
                </td>
            </tr>
            <tr>
                <td align="Center">
                    <input id="btnReturnDate" onclick="Javascript:ReturnDate()" type="button" value="Select" runat="Server"/>&nbsp; 
                    <input id="btnCloseWindow" onclick="Javascript:Close()" type="button" value="Close" runat="Server"/>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

==================================