jquery .submit（）在setTimeout中不会向php传递数据

Question

I am trying to add an effect to the login form and when the effects is done ( like 1 sec) it then goes to php.

I tried to make a setTimeout() function inside the .submit with e.preventDefault() so I can delay it for a sec but the problem is it didnt take the data but instead it goes to the php in a blank webpage that sopposed to be checking the data that was inputted.

And when the e.preventDefault() is been taken away the php works but it didnt give me a second to perform the animation first then go to php file to check all the data

here is my code

<script> $("#effectsExplode").submit(function (e) {
        var form = this;
        e.preventDefault();
        $("#effectsExplode").toggle("explode");
        setTimeout(function () {
            form.submit();
        },1000);
    });
</script>




<form id="effectsExplode" class="form-1" method="post" action="checklogin.php">
    <p class="field">
        <input type="text" name="login" placeholder="Username or email">
        <i class="icon-user icon-large"></i>
    </p>
    <p class="field">
        <input type="password" name="password" placeholder="Password">
        <i class="icon-lock icon-large"></i>
    </p>
    <p class="submit">
        <button id="buttonexplode" type="submit" name="loginsubmit">
            <i class="icon-arrow-right icon-large"></i>
        </button>
    </p>
</form>

Answer 1

You've created an infinite loop. If for example I had a button and this javascript:

$('button').click(function() {
    var b = this;
    $('#status').append('Clicked<br/>');
    setTimeout(function() {
        b.click();
    }, 1000);
});

http://jsfiddle.net/b9chris/yaNdc/

Once I click that button, I'll get another "Clicked" message appended to that status tag every second... forever. That's because jquery fires all its event handlers for the events you manually trigger; in this case you attached to 'submit' then fired 'submit' and looped right back into your own code, which keeps preventing the form from ever actually submitting.

Most likely on your local test machine this form submission happens almost instantly, but once you put it out on the webserver the live version will take longer, and your animation will have time to play. Simplest solution is to just get rid of the ev.preventDefault() and let it submit and play while the submission takes its time.