CODEWITHSUNDEEP
javascriptasp.net
Ajay
Ajay

Reputation: 6590

Javascript to disable asp.net button

I use the following Javascript to disable a button after click:

var c = 0;
function DisableClick(target) {
    var objName = target;
    document.getElementById(objName).disabled = true;
    c = c + 1;
    msg = 'Please Wait...(' + c + ')!';
    document.getElementById(objName).value = msg;
    var t = setTimeout('DisableClick()', 1000);
}

<asp:Button ID="btnLogin" runat="server" CssClass="cssLoginButton blue"  Text="Log in" ToolTip="Log in" ValidationGroup="UserLogin" onclick="btnLogin_Click" OnClientClick="DisableClick('btnLogin')" />

My Javascript gives this error:

Microsoft JScript runtime error: Unable to set value of the property 'disabled': object is null or undefined

Error Given by script

How can I solve this?

Upvotes: 1

Views: 7684

Answers (4)

MVCKarl
MVCKarl

Reputation: 1295

Details: This should solve your solution of Disabling the button as well as displaying a message until the process has finished

Markup

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
     <ContentTemplate>

      .... Your other code

        <asp:Button ID="btnLogin" runat="server" CssClass="cssLoginButton blue"  Text="Log in" ToolTip="Log in"
           OnClientClick="this.disabled=true;" ValidationGroup="UserLogin" onclick="btnLogin_Click"  />

     </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
        <ProgressTemplate>
            Please Wait...
        </ProgressTemplate>
    </asp:UpdateProgress>

To test it

Code behind

protected void btnLogin_Click(object sender, EventArgs e)
{
   // Introducing delay for demonstration.
   System.Threading.Thread.Sleep(3000);      
}

Upvotes: 0

Adil
Adil

Reputation: 148110

You can pass the clicked button object in javascript function. Return false if you do not need postback.

Change

OnClientClick="DisableClick('btnLogin')"

To

// the DisableClick make a loop, so make the return here.
OnClientClick="DisableClick(this);return false;" 


function DisableClick(target) {   
    target.disabled = true;
    c = c + 1;
    msg = 'Please Wait...(' + c + ')!';
    target.value = msg;

    // The DisableClick needs the target parametre, so send it again
    //  but need to keep it here for work.
    var me = target;
    var t = setTimeout(function(){DisableClick(me);}, 1000);
}

Upvotes: 1

Smartboy
Smartboy

Reputation: 1006

What you can do is call the function on load of the body and it should work fine. So the code will be

<script type="text/javascript">
function disableBtn()
{
var btn= document.getElementById("<%=Button1.ClientID%>");
btn.disabled=true;
}
</script>

Html

<body onload="javascript:disableBtn();">

 <asp:Button ID="Button1" runat="server" Text="Button" />
 ...
 </body>

Hope this will help you !

Upvotes: 0

Mihai
Mihai

Reputation: 2760

you could do 

OnClientClick = "JavaScript: return false; "

also 

document.getElementbyid (objectName)

returns null

are you sure you're passing the correct id of the. button?

Upvotes: 0

Related Questions