How to enable a button after completing the required fields?

Question

I need the button btnprint is enabled only if the DropDown, the txtDateInitial and the txtDateEnd were filled in. They could help?

<%@ Page Title="" Language="C#" MasterPageFile="~/FrontPage.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="IASD.ASCS.WebForm.reports.closemonth.Default" %>

<%@ Register TagPrefix="cc1" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit, Version=4.5.7.1005, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" %>

<%@ MasterType VirtualPath="~/FrontPage.Master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="form_Close">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div class="linha">
                <div class="texto">
                    <div class="control-group">
                        <asp:Label ID="lblSchoolID" runat="server" Text="Escola" Height="33px"></asp:Label>
                        <div class="controls">
                            <asp:DropDownList ID="ddlSchool" CssClass="textbox_search" runat="server" Width="388px" Height="28px" AutoPostBack="True" OnSelectedIndexChanged="ddlSchool_SelectedIndexChanged" />
                        </div>
                    </div>
                </div>
                <div class="field_button">
                    <div class="control-group">
                        <asp:Label ID="lblInitialDate" runat="server" Text="Data Inicial" Height="33px" />
                        <div class="controls">
                            <asp:TextBox ID="txtDateInitial" runat="server" CssClass="textbox_search" Width="123px" OnTextChanged="txtDateInitial_TextChanged" AutoPostBack="True" />
                            <cc1:CalendarExtender ID="txtDateInitial_CalendarExtender" runat="server" Enabled="True"
                                Format="dd/MM/yyyy" TargetControlID="txtDateInitial">
                            </cc1:CalendarExtender>
                        </div>
                    </div>
                </div>
                <div class="field_button">
                    <div class="control-group">
                        <asp:Label ID="lblEndDate" runat="server" Text="Data Final" Height="33px" />
                        <div class="controls">
                            <asp:TextBox ID="txtDateEnd" runat="server" CssClass="textbox_search" Width="123px" OnTextChanged="txtDateEnd_TextChanged" AutoPostBack="True" />
                            <cc1:CalendarExtender ID="txtDateEnd_CalendarExtender" runat="server" Enabled="True"
                                Format="dd/MM/yyyy" TargetControlID="txtDateEnd">
                            </cc1:CalendarExtender>
                        </div>
                    </div>
                </div>
                <div class="field_button">
                    <div class="control-group">
                        <div class="controls">
                            <asp:ImageButton ID="btnPrint" runat="server" ImageUrl="~/Images/print.png" OnClick="btnPrint_Click1" ToolTip="Imprimir" />
                        </div>
                    </div>
                </div>
            </div>
            <br />

        </ContentTemplate>
    </asp:UpdatePanel>
    <br />
    <asp:HiddenField ID="hfclosemonth" runat="server" />
</div>

Answer 1

How are you using AutoPostBack="True" in the data entry controls, you can enable and disable the button in the page Load.

protected void Page_Load(object sender, EventArgs e)
{
   btnPrint.Enabled = !string.IsNullOrWhiteSpace(txtDateInitial.Text) &&   
                      !string.IsNullOrWhiteSpace(txtDateEnd.Text) && 
                      !string.IsNullOrWhiteSpace(ddlSchool.SelectedValue);
}

If you don’t want to do this on the server side you can then use jQuery or some other framework for javascript to manipulate the controls on the client side.