CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JustCurious
JustCurious

Reputation: 362

Is there a way to delay submitting a form to perform some animations

The form is supposed to slideup and a new div will be displayed in the place of the form. The problem here is as submit is pressed the animation stops and hence it loads the next page. Is there a way to delay the submitting of the form so that the animations can take place.

HTML

<form class=" login myform" action='' method="post" id='frmlogin' name='frmlogin' >
<p class="">
<label for="username" class="">Your email&nbsp;<span class="required">*</span></label>
<input type="email" class=" " name="login_email"
id="login_email" autocomplete="email" value="" size='35' />
</p>
<p class="">
<label for="password" class="">Password&nbsp;<span class="required">*</span></label>
<input class=" " type="password" name="login_password" 
id="login_password" autocomplete="password" size='35'   />
</p>
<p class="form-row">

<button type="submit" class="hello" name="login" value="Log in">Log in</button>
<input type="button" class="hello  " value="LOGIN" style="color:white;background: #c19d56;border:2px double #c19d56;outline: #c19d56 solid 1px;outline-offset: 2px; padding: 15px;width: 200px;cursor: pointer;letter-spacing: .19em;">
</p>

<p class="">
<a href="#">Forgot password?</a>
</p>
</form>
<div class="row w-100 mydiv" style="display:none;background: #c19d56;height: 100px;border-radius: 10px;">
    <br>&nbsp;&nbsp;&nbsp;
    Congratulations you are logged in!!
</div>

Jquery

$(".hello").click(function(){       
    $(".myform").slideUp("slow");
    $(".mydiv").css({ display: 'block' }, "slow");
});

Thanks in advance!!

Upvotes: 0

Views: 94

Answers (2)

AndrewL64
AndrewL64

Reputation: 16311

Just use the preventDefault() method to stop the form from submitting and the submit() event to submit it like this:

$(".hello").click(function(e){
  e.preventDefault();

  $(".myform").slideUp("slow");
  $(".mydiv").css({display:'block'},"slow");

  $("form.myform").submit();
});

Upvotes: 1

Zain Shaikh
Zain Shaikh

Reputation: 6043

Yes, change login button to:

<button type="button" class="hello" name="login" value="Log in">Log in</button>

and use following jQuery to submit form:

$('.hello').click(function() {
    var $form = $('.myform');
    $form.slideUp('slow', function() {
        $('.mydiv').animate({
            'display: 'block'
        }, 'slow', 'linear', function() {
            $form.submit();
        });
    });
});

Upvotes: 0

Related Questions