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.