Friday, 18 April 2014

Disable Buttons Until Textboxes/Inputs are Not Filled Using Jquery


Disable Buttons Until Textboxes/Inputs are Not Filled Using Jquery


Today I will share a nasty trick to disable the buttons in the form until the inputs are not filled properly using Jquery...

Design Part:


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Disable Button</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" ></script>
    <script type="text/javascript">
    
    $(document).ready(function (){
    validate();
    $('#txtName, #txtAddress, #txtPhone').change(validate);
});

function validate(){
    if ($('#txtName').val().length   >   0   &&
        $('#txtAddress').val().length  >   0   &&
        $('#txtPhone').val().length    >   0) {
        $("#btnClick").prop("disabled", false);
    }
    else {
        $("#btnClick").prop("disabled", true);
    }
}
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Font-Bold="True" Text="Name:"></asp:Label>
        <asp:TextBox ID="txtName" runat="server"></asp:TextBox><br />
        <br />
        <asp:Label ID="Label2" runat="server" Font-Bold="True" Text="Address"></asp:Label>
        <asp:TextBox ID="txtAddress" runat="server"></asp:TextBox><br />
        <br />
        <asp:Label ID="Label3" runat="server" Font-Bold="True" Text="Phone:"></asp:Label>
        <asp:TextBox ID="txtPhone" runat="server"></asp:TextBox><br />
        <br />
        <asp:Button ID="btnClick" runat="server" OnClick="Button1_Click" Text="Submit" /></div>
    </form>
</body>
</html>

And here is the Output for the same:



No comments:

Post a comment

Thank You for Your Comments. We will get back to you soon.

back to top