CODEWITHSUNDEEP
javascriptanimationbuttontimeoutsubmit
Mischa Mustermann
Mischa Mustermann

Reputation: 91

Timeout a submit animation with JavaScript

i have a submit button and a JavaScript. On click the button changes the state from active to inactive and a spinner animation is shown. I want to add to the script a timeout function. The button shall stop the animation and go back in active state after 3000 ms and show the normal submit button again. Here is my code:

 <button type="submit" class="btn btn-primary btn-lg" value="submit" id="ajax-form-button">Submit</button>


$(document).ready(function() {
 $("#ajax-form").submit(function(e) {
   // disable button
   $('#ajax-form-button').prop("disabled", true);
   // add spinner to button
   $('#ajax-form-button').html(
   `<i class="spinner-border spinner-border-sm mb-1"></i> Bitte warten...`
   );            
 });
});

Upvotes: 0

Views: 301

Answers (1)

Luca Kiebel
Luca Kiebel

Reputation: 10096

window.setTimeout() is what you are looking for.

$(document).ready(function() {
  $("#ajax-form").submit(function(e) {
    // disable button
    $('#ajax-form-button').prop("disabled", true);
    // add spinner to button
    $('#ajax-form-button').html(
      `<i class="spinner-border spinner-border-sm mb-1"></i> Bitte warten...`
    );

    window.setTimeout(() => {
      $('#ajax-form-button').prop("disabled", false); //re-enable button
      $('#ajax-form-button').html("Submit"); // oder "Absenden"  
    }, 3000) // run that function after 3 s

  });
});

Upvotes: 1

Related Questions