JQuery settimeout function

Question

I’ve the below HTML & JavaScript code:

Html:

<form action="#" method="post">

    <input type="button" name="submit" value="Submit" class="submit_wide" id="myBtn" >

</form>

JavaScript:

$(".submit_wide").click(function () {

    $(this).val('Please wait..');

    $(this).attr('disabled', true);

    setTimeout(function() { 

        $(this).attr('disabled', false);

        $(this).val('Submit');

    }, 2000);

});

I want this code to disable the button for 2 seconds, when the user clicks it which states ‘submit’. Can anyone tell me how to do it? 

Answer 1

You have to refer to the button with a variable inside the setTimeout() call. 

Check the below code implementation:

$(".submit_wide").click(function () {

    var $this = $(this);

    $this.val('Please wait..');

    $this.attr('disabled', true);

    setTimeout(function() { 

        $this.attr('disabled', false);

        $this.val('Submit');

    }, 2000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="button" class="submit_wide" value="Submit"/>

Interested in Java? Check out this Java Certification by Intellipaat.