JavaScript setTimeout表单数据

Question

I have an html form:

<form method="post" action="login-autentica" id="loginform" class="input-wrapper blue-gradient glossy" title="Login">
    <ul class="inputs black-input large">
        <li><span class="icon-user mid-margin-right"></span>
            <input type="text" name="porta" id="username" value="" class="input-unstyled" placeholder="Porta" autocomplete="off">
        </li>
        <li><span class="icon-lock mid-margin-right"></span>
            <input type="password" name="senha" id="password" value="" class="input-unstyled" placeholder="Senha" autocomplete="off">
        </li>
    </ul>
    <p class="button-height">
        <button type="submit" class="button glossy float-right" id="login">Entrar</button>
        <input type="checkbox" name="remind" id="remind" value="1" checked="checked" class="switch tiny mid-margin-right with-tooltip" title="Habilitar Auto-Login">
        <label for="remind">Lembrar</label>
    </p>
</form>

JavaScript is responsible for error messages and other things:

$('#loginform').submit(function (event) {
    // Values
    var login = $.trim($('#username').val()),
        pass = $.trim($('#password').val());

    // Check inputs
    if (login.length === 0) {
        // Display message
        displayError('Por Favor, insira sua porta!');
        return false;
    } else if (pass.length === 0) {
        // Remove empty login message if displayed
        formWrapper.clearMessages('Por Favor, insira sua porta!');

        // Display message
        displayError('Por Favor, insira sua senha!');
        return false;
    } else {
        // Remove previous messages
        formWrapper.clearMessages();

        // Show progress
        displayLoading('Checando usuário CasCast...');

        // Stop normal behavior
        event.preventDefault();



        // Simulate server-side check
        setTimeout(function () {
            document.location.href = 'url'
        }, 2000);
    }
});

The problem is in the following statement:

"setTimeout (function () {document.location.href = 'url'}, 2000);"

My form html sends data to a php file called 'login-autentica.php' , The problem with this is that setTimeout can not send the data to PHP, returning the error.

I want that when the User click 'submit' , data from HTML form to be captured and sent to the 'login-autentica.php' after the time-period mentioned in setTimeout() ,?

Thanks for helping me, excuse my english, I'm from Brazil...

Answer 1

You use document.location.href in setTimeout. Its an redirect (GET method), and ,of course, POST-data doesnt sending.

Try to use in setTimeout

        setTimeout(function() {
                $("#loginform").submit();
        }, 2000);

Answer 2

I have tested your code many times and got the reason.

The page will navigate to another page after the form submit. Now if 2s (as per your code) passes before the navigation occurs then the js code that had to occur after 2s will not execute because a new page content is loaded in the browser.

Hence I tried reducing the timeout period and got the maximum allowed value 300-400. But that too isn't certain. so you should keep it ideally ~0 ar at least as minimum as possible to possibly avert such a condition.

Answer 3

If you're doing the login check, you should make an AJAX call which will store the user into the session of wherever you keep it if the credentials are correct, and then, if AJAX returns success, you should redirect to another page.

The difference between the simulated server check (setTimeout) and the real one (AJAX call, for example) is that you can use a callback function in the latter, while you don't know what will happen in 2secs in the former.