Javascript not works near UpdatePanel

Question

I have this UpdatePanel:

<asp:TextBox ID="date" runat="server" />

<asp:ScriptManager ID="Manager" runat="server" />
            <asp:UpdatePanel ID="setDate" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
                <ContentTemplate>
                       <asp:Label ID="checkRes" runat="server" />&nbsp;<asp:Label ID="range" runat="server" />

                        <asp:ImageButton ID="check" runat="server" ImageUrl="../img/process.png" OnClick="check_Click" CausesValidation="false" UseSubmitBehavior="false"/>

                        <asp:Button ID="submit" runat="server" Text="Submit" CausesValidation="true" Enabled="false" />

                    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="setDate">
                        <ProgressTemplate>

                            <asp:Image ID="loader" runat="server" ImageUrl="~/img/loader.gif" />
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                </ContentTemplate>

                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="check" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
<script type="text/javascript">
    var textBox = document.getElementById('<% =date.ClientID %>');
    var submitButton = document.getElementById('<% =submit.ClientID %>');
        textBox.onchange = function () {
            submitButton.disabled = true;
        };
</script>

with this code behind:

 protected void check_Click(object sender, EventArgs e)
   {
      submit.Enabled=true;
   }

You can see that first Button is disabled and after UpdatePanel triggering it will be enabled; now I want if date's text changed Button become disable. I tested my JS here but it don't disable Button in ASPX.

Answer 1

after postback,clear the bindings with the control.that is the reason.

try this,

<asp:TextBox ID="date" runat="server" />
    <asp:ScriptManager ID="Manager" runat="server" />
    <script type="text/javascript">
        function pageLoaded()
        {
            var textBox = document.getElementById( '<% =date.ClientID %>' );
            var submitButton = document.getElementById( '<% =submit.ClientID %>' );
            textBox.onchange = function ()
            {
                submitButton.disabled = true;
            };
        }


        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_pageLoaded( pageLoaded );
    </script>
    <asp:UpdatePanel ID="setDate" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
        <ContentTemplate>
            &nbsp;<asp:Label ID="checkRes" runat="server" />&nbsp;<asp:Label ID="range" runat="server" /><br />
            <asp:ImageButton ID="check" runat="server" ImageUrl="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg"
                OnClick="check_Click" CausesValidation="false" UseSubmitBehavior="false" />
            <br />
            <asp:Button ID="submit" runat="server" Text="Submit" CausesValidation="true" Enabled="false" />

            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="setDate">
                <ProgressTemplate>
                    <asp:Image ID="loader" runat="server" ImageUrl="~/img/loader.gif" />
                </ProgressTemplate>
            </asp:UpdateProgress>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="check" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>

you can change it, but script block must place in after scriptmanager.