在动画完成后执行表单JQuery [英] Executing a form after animation is done JQuery

问题描述

我试图在我的动画完成并完成后才提交表单

代码------>

 < ; form action ='loginn.php'method ='post'> 
< fieldset> 
< legend>注册< / legend> 
< label for ='用户名'>用户名*：< / label> 
< input type ='text'name ='username'id ='username'maxlength =50
 /> 
< label for ='password'>密码*：< / label> 
< input type ='password'name ='password'id ='password'
 maxlength =50/> < a>< input class =animatedtype ='submit'name ='Submit'value ='Submit'/>< / a> 
 
< / fieldset> 
< / form> 
< span>< / span> 
 
< script src =jquery.js>< / script> 
< script> $（$$）$（form）。submit（function（）{
 event.preventDefault（）; $ b $ if（$（input：first）.val（）==correct ）{
 $（span）。text（OKAY：D）。show（）。fadeOut（1000）; 
 $（a）。addClass（'animated hinge'）; 
 $ b $（span）。promise（）。done（function（）{
 return true; 
}）; 
 
} else { （无效！）。show（）。fadeOut（1000）; 
返回false; 
} 
}）; 
 $（span 
< / script> 
< / body> 
 
< / html> 
  

表格在动画完成前提交！

解决方案

问题可能在这里：

  $（form） .submit（function（）{
 event.preventDefault（）; 
  

你不是声明事件。试试这个：

  $（form）。 submit（function（event）{
  

编辑：

此外，您传递给 done（）方法的函数不会执行任何操作。返回 true 从该函数不会影响事件;实际上，事件已经处理并且在函数运行时消失。

如果您尝试提交在你的完成回调的表单中，你需要明确地做，为了避免再次提交时发生无限循环，请尝试指定一个名称空间：

  $（form）。submit（function（event）{
 var that =这个; 
 if（event.namespace！='Verified'）{
 event.preventDefault（）; 
 if（$（input：first）。val（）==correct）{
 $（span）。promise（）。done（function（）{
 $（that）.trigger（'submit.verified'）; 
}）; 
} else {
 $（span）。text（Not valid！）。show（）。fadeOut（1000）; 
返回false; 
} 
} 
}）; 
  

I am trying to submit the form only after my animation is done and completed

Code ------> http://pastie.org/5109573

<form action='loginn.php' method='post'>
    <fieldset>
        <legend>Register</legend>
        <label for='username'>Username*:</label>
        <input type='text' name='username' id='username' maxlength="50"
        />
        <label for='password'>Password*:</label>
        <input type='password' name='password' id='password'
        maxlength="50" /> <a><input class ="animated" type='submit' name='Submit' value='Submit' /></a>

    </fieldset>
</form> 
<span></span>

<script src="jquery.js"></script>
<script>
    $("form").submit(function () {
        event.preventDefault();
        if ($("input:first").val() == "correct") {
            $("span").text("OKAY :D").show().fadeOut(1000);
            $("a").addClass('animated hinge');

            $("span").promise().done(function () {
                return true;
            });

        } else {
            $("span").text("Not valid!").show().fadeOut(1000);
            return false;
        }   
    });
</script>
</body>

</html>

The form gets submitted before the animation is complete !

解决方案

The problem is likely here:

$("form").submit(function() {
    event.preventDefault();

You're not declaring event. Try this:

$("form").submit(function(event) {

Edit:

Also, the function you're passing to the done() method doesn't do anything. Returning true from that function won't affect the event; in fact, the event is already handled and gone by the time that function runs.

If you're trying to submit the form with your done callback, you need to do it explicitly. To avoid an infinite loop when it submits again, try specifying a namespace:

$("form").submit(function(event) {
    var that = this;
    if (event.namespace != 'verified') {
         event.preventDefault();
         if ($("input:first").val() == "correct") {
              $("span").promise().done(function () {
                   $(that).trigger('submit.verified');
              });
         }  else {  
             $("span").text("Not valid!").show().fadeOut(1000);                             
             return false;
         }
    } 
});​

这篇关于在动画完成后执行表单JQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！