jQuery .on-submit mit Ajax-Callback wird beim Seitenladen ausgeführt


Jan-Frederik Stieler

Monsterator
Moderator
Hi,
ich werd grad verrückt, ich habe ein .on-submit mit einer Ajax-Funktion im Callback. Das Problem ist das die Funktion ausgeführt wird bevor ich den Submit-Button in dem Form gedrückt habe. Und in der Konsole wird auch das .done und .always vor dem XHR-Loading ausgeführt.

Javascript:
function ajaxForm(data, target){
    $.ajax({
        method: 'post',
        url: target,
        data: data
    })
    .done(function(response) {
        console.log('done:' + response);
    })
    .fail(function(response) {
        console.log('fail:' + response);
    })
    .always(function(response) {
        console.log('always:' + response );
    });
}

$(function(){
    // $('input').on('blur keyup keydown paste change input', error);
    $('#loginForm').on('submit', ajaxForm(
        {
            username: $('#userInput').val(),
            password: $('#pwInput').val()
        },
        'login.php')
    );
});
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dashboard</title>
    <link href="./assets/css/fontawesome/fontawesome.css" rel="stylesheet">
    <link href="./assets/css/fontawesome/brands.css" rel="stylesheet">
    <link href="./assets/css/fontawesome/solid.css" rel="stylesheet">
    <link href="./assets/css/default.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700&display=swap" rel="stylesheet">
</head>
<body>
    <main>
        <section class="center">
            <?php echo file_get_contents('./assets/images/logo.svg'); ?>
            <form action="" method="post" class="login-form" id="loginForm">
                <div class="input-group">
                    <input type="text" name="userinput" class="input input-theme" id="userInput">
                    <label for="userInput" class="label">Nutzername/Passwort*</label>
                </div>
                <div class="input-group">
                    <input type="text" name="pwinput" class="input input-theme" id="pwInput">
                    <label for="pwInput" class="label">Passwort*</label>
                </div>
                <button type="submit" class="btn btn-default btn-100">Open</button>
            </form>
        </section>
    </main>
    <footer>

    </footer>
    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/js/script.js"></script>
</body>
</html>
 

Sempervivum

Erfahrenes Mitglied
Javascript:
    $('#loginForm').on('submit', ajaxForm(
        {
            username: $('#userInput').val(),
            password: $('#pwInput').val()
        },
        'login.php')
    );
So wird die Funktion gleich beim Registrieren des Listeners ausgeführt, was das Ausführen des Submit einschließt, und ihr Rückgabewert wird registriert. Du musst jedoch eine Referenz der Funktion übergeben, so:
Code:
    $('#loginForm').on('submit', function () {
        ajaxForm(
            {
                username: $('#userInput').val(),
                password: $('#pwInput').val()
            },
            'login.php');
    });
 

ComFreek

Mod | @comfreek
Moderator
Mit neuerer Syntax auch:
Javascript:
...on('submit', () => ajaxForm({
  username: ...,
  password: ...
}, 'login.php'));