So I have this form:
<form method="post" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" id="email" name="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" id="PassWord" name="PassWord" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right"><a href="">Zaboravili ste password?</a></div>
</div>
<button id="submitit" onclick="GetUser();" class="btn btn-primary btn-block">Sign in</button>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
And when I press on the Sign in button, I send an post and I have my HTML updated correctly for a brief second, and then the page reloads. This is not what I want. I dont want the page to reload, but stay as it is after my ajax call. Here is the javascript/jquery code:
function GetUser() {
var email = $("#email").val();
var password = $("#PassWord").val();
$.post('../phpdatabase/getlogin.php',{ email: email , password : password }, function(data){
$('#LogNav').html(data);
});
}
The default behaviour of a submit button is to submit the form, so you have to prevent it.
onclick="GetUser(event);"
This will pass the event to the function callback. Insde your function you have to use:
function GetUser(e) {
e.preventDefault();
I would suggest you to change the event from the button to the form submit event:
$("#login-nav").on("submit", function(e) {
var email = $("#email").val();
var password = $("#PassWord").val();
$.post('../phpdatabase/getlogin.php',{ email: email , password : password }, function(data){
$('#LogNav').html(data);
});
e.preventDefault();
});
Avoid using inline events into your HTML elements e.g. onclick, onfocus etc...
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments