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