CODEWITHSUNDEEP
jquery
milkchug2000
milkchug2000

Reputation: 1

Re-enabling a disabled submit button

I have what seems to be a simple line of jquery, but it's not working as expected. I am trying to accomplish the following:

  1. Disable a button
  2. Wait almost a second
  3. Enable the same button

Here is the line of code:

    $("#formsubmit").prop('disabled',true).delay(750).prop('disabled',false);

1 and 2 are accomplished, but 3 never happens See a (non) working example

Thank you

Upvotes: 0

Views: 30

Answers (2)

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18883

.delay() will not work in this scenario, instead of using .delay() use setTimeout() as shown:-

$("#formsubmit").click(function() {
  $("#formsubmit").prop('disabled',true);
  setTimeout(function(){$("#formsubmit").prop('disabled',false);},750)
});

Working Demo

Edit :-

.delay() only delays item(s) in a queue like animations

so in this case instead of .dealy() setTimeout() will work.

Upvotes: 1

doque
doque

Reputation: 2733

jQuery's .delay() function is usually used for queuing effects, not manipulating attributes:

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

If you must, you can supply a custom queue, such as shown here:

$("#formsubmit").click(function () {
    $('.message').show();

    var button = $(this);
    button.prop("disabled", true).delay(750).queue(function (next) {
        button.prop("disabled", false);
        next();
    });
});
span.message {
    display: none;
}
<body>
  <form id="form"> <span class="message">Some Message</span>

    <input type="button" id="formsubmit" value="Submit" />
  </form>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

Or, you just use the native setTimeout function instead.

Upvotes: 3

Related Questions