jquery enabling a button after some time

Question

this code is not working , it disables the code and after sometimes it must enable it , how could i do it? what could be wrong? i am doing this to avoid multiple clicks

<% Html.EnableClientValidation(); %>
    $(document).ready(function () {
        $('#form1').submit(function () {
            $('#btn').attr("disabled", "disabled");
            setTimeout('enableButton()', 50);
        });
        function enableButton() {
            $('#btn').removeAttr('disabled');
        }
    }); 

<% using (Html.BeginForm("Create","OrganizationGroups",FormMethod.Post,new {id="form1"}))

{%>
%>
<%= Html.ValidationSummary(false)%> 

<div>
    <%= Html.ActionLink("Back to List", "ManageOrganizationGroup")%>
</div>

Answer 1

You can't pass a string to setTimeout() here, since the function isn't global, instead pass a direct reference to the function, so change this:

setTimeout('enableButton()', 50);

to this:

setTimeout(enableButton, 50);

In general always try to do this, it'll avoid many issues...like the one you're having.

Answer 2

this:

<% Html.EnableClientValidation(); %> 

function enableButton() {
   $('#btn').removeAttr('disabled');
}

$(document).ready(function () { 

   $('#form1').submit(function () { 
       $('#btn').attr("disabled", "disabled"); 
       setTimeout(enableButton, 50);
   });

});

or this:

<% Html.EnableClientValidation(); %> 

$(document).ready(function () { 

   $('#form1').submit(function () { 

       var btn = $('#btn').attr("disabled", "disabled"); // ref to #btn

       setTimeout(function() 
         {
            $(btn).removeAttr('disabled');
         }
      , 50);
   });

});