Thursday 20 March 2014

jquery how to disable a button

Many times we got issue in web form when multiple time of save button click, It can be handle by disabling the save button while clicking the first time.
Here is code by which you can disable the button by jquery.
You just need to take the reference of Jquery js file into your application or page;

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
@Code to make the button disable in JQuery;
<script type="text/javascript">
        $(document).ready(function () {
            $("#Button1").click(function () {
                $("#Button1")[0].disabled = true;
            });
        });
    </script>
@Html code for button;
<asp:Button ID="Button1" runat="server" Text="Button"  />
@complete code;
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Make button disable</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Button1").click(function () {
                $("#Button1")[0].disabled = true;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table width="60%" align="center">
            <tr>
                <td colspan="2" align="center">
                    <h1>
                       Disable button control</h1>
                </td>
            </tr>
            <tr>
               
                <td align="right">
                    Disable
                </td>
                <td align="left">
                   <asp:Button ID="Button1" runat="server" Text="Button"  />
                </td>
            </tr>
           
        </table>
    </div>
    </form>
</body>
</html>
@output
Before click on button, page will appear as;
After clicking button;

No comments:

Post a Comment