Delaying a jQuery remove class function when a form submit button is clicked

Question

I am trying to remove the class of 3 input elements in a single form when the button "submit" is clicked, but after 5 seconds of delay. I know I have to use the setTimeout function, but I don't know how to build my code, so it can work properly.

Here is the code that I wrote (it's very simple)

jQuery(document).ready(function(){
    jQuery(".contacts-submit").click(function() {
        jQuery('#input-1').removeClass('input--filled');
        jQuery('#input-2').removeClass('input--filled');
        jQuery('#input-3').removeClass('input--filled');

    });
});

Answer 1

Just wrap all your required functionality in setTimeout . There's also no need to repeat yourself, you can do it all in 1 selector.

jQuery(document).ready(function(){

    jQuery(".contacts-submit").click(function() {
        setTimeout(function(){
            jQuery('#input-1, #input-2, #input-3').removeClass('input--filled');
       },5000);

    });

});

Answer 2

This is how you do it using the setTimeout function :

jQuery(document).ready(function(){
  jQuery(".contacts-submit").click(function() {
      setTimeout(function() { // This anonymous function will be called
        jQuery('#input-1').removeClass('input--filled');
        jQuery('#input-2').removeClass('input--filled');
        jQuery('#input-3').removeClass('input--filled');
      }, 5000); // After 5000ms, (5 seconds)
  });
});