jQuery delay() function not working

Question

I need to show a success message upon the change of password, the issue is success message displays and vanishes in no time even though I increase the delay time. For testing you have to give same password and confirm password value

Here is the code,

<div class="modal-body">
    <div class="row">
       <div class="col-md-2"></div>.

           <!-- This is the div where I display message -->

          <div class="col-md-8" id="alert-msg" style="display: none;">
               <div style="text-align: center;" class="alert alert-success">
                  <strong>Success! Your Request Has Been Submitted!!</strong> 
                </div>  

            </div>
        </div>    

    <form class="form col-md-12 center-block" id="pass" method="GET" action="index.php">
          <div class="form-group">
              <input type="password" class="form-control input-lg" placeholder="Password" name="pass1" id="f_pass">
            </div>
            <div class="form-group">
              <input type="password" class="form-control input-lg" placeholder="Confirm Password" name="pass2" id="c_pass">
            </div>
            <div class="form-group">
              <button type="submit" id="msg-sub" class="btn btn-primary btn-lg btn-block">Submit</button>                 
            </div>
    </form>
</div>

This is the script part,

<script>
   $("#msg-sub").click(function(){
            var pass1= $("#f_pass").val();              
            if(pass1 !=='') {
                $('#alert-msg').show(0).delay(3000).hide(0);    
            }
    });         
</script>

Here is the url,

Please help me out, Thanks in advance!!!

you can use 'vanishing thing' with fadeOut: $('#alert-msg').fadeOut(3000) — monterico
– monterico, Commented Jun 10, 2016 at 8:50
By the way using .show() and .hide() does impose a slight performance penalty. Not really a problem if you're only using it occasionally, but just be aware that calling it lots of times will slow down your page. — gcampbell
– gcampbell, Commented Jun 10, 2016 at 8:50
Have you tried a non-zero duration for.show() and .hide()? With zero duration it may not be added to the animation queue. — nnnnnn
– nnnnnn, Commented Jun 10, 2016 at 8:54
Clicking the button will submit the form and trigger a GET on the target page - that won't be delayed by queueing up jQuery effects. When should the notification be shown with respect to submitting the form (before? after?) — Ian Gilroy
– Ian Gilroy, Commented Jun 10, 2016 at 9:00

Akinjide · Accepted Answer · 2016-06-10 11:12:00Z

1

The error is with the script, you need to wrap it inside jQuery .ready method. You also need to prevent the click handler propagation by using event.preventDefault()

<script>
 $(document).ready(function(){
   $("#msg-sub").click(function(e){
     var pass1= $("#f_pass").val();              
     if(pass1 !=='') {
       $('#alert-msg').css('display', 'block').delay(3000).fadeOut(600);    
     }
     e.preventDefault();
   }); 
 });        
</script>

Here's a link to the codepen: http://codepen.io/anon/pen/vKLdJj

edited Jun 10, 2016 at 11:12

answered Jun 10, 2016 at 8:59

Akinjide

2,76324 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Balaji Ravichandran Over a year ago

The message should fade-off in your example its just displays

Akinjide Over a year ago

I just updated the codepen with the fade effect and also a delay so the user can see the success message before it leaves.

devnull69 Over a year ago

Currently e is missing

Akinjide Over a year ago

@BalajiRavichandran Sure, I think it will be nice to tick right if it works, so others know its right

devnull69 Over a year ago

e is still missing from your answer, I think Balaji must have added it

|

phreakv6 · Accepted Answer · 2016-06-10 08:51:31Z

0

The problem is that the submit event is triggered since this click is on a submit button. Return false within your click handler to stop propagation. This works.

   $("#msg-sub").off().click(function(){
            var pass1= $("#f_pass").val();              
            if(pass1 !=='') {
                $('#alert-msg').show(0).delay(3000).hide(0);    
            }
            return false;
    });

answered Jun 10, 2016 at 8:51

phreakv6

2,1651 gold badge11 silver badges11 bronze badges

2 Comments

devnull69 Over a year ago

or change the type of the button to button

Balaji Ravichandran Over a year ago

@devnull69 the above code works fine, but I need to handle bootstrap form validation which will get affected on changing the button type. Is there any alternative way to achieve without changing the button

Collectives™ on Stack Overflow

jQuery delay() function not working

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related