Question

我正在尝试在动画完成并完成后提交表单

<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>

在动画完成之前提交表单！

Answer 1

问题可能在这里：

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

您没有声明event。试试这个：

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

编辑：

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

如果您尝试使用done回调提交表单，则需要明确地执行此操作。要在再次提交时避免无限循环，请尝试指定命名空间：

$("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;
         }
    } 
});

Answer 2

您需要使用动画回调函数在动画完成时提交表单，如下所示：

$("input[name='Submit']").on('click', function(e) {
    e.preventDefault();
    var form = $(this);
    if ($("input:first").val() == "correct") {
        $("span").text("OKAY :D").show().fadeOut(1000, function() {
            form.submit();
        });
        $("a").addClass('animated hinge');
    } else {
        $("span").text("Not valid!").show().fadeOut(1000);
    }
});

动画完成后执行表单JQuery

2 个答案:

编辑：