 |
|
Code (PHP)
<form id="frm_login" method="post" class="form-element">
<div class="form-group has-feedback">
<input type="text" class="form-control" name="username" id="username" placeholder="Username" autocomplete="off" required>
<span class="ion ion-email form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" autocomplete="off" required>
<span class="ion ion-locked form-control-feedback"></span>
</div>
<div class="row">
<!-- /.col -->
<div class="col-12 text-center">
<button type="submit" id="btn-login" name="btn-login" class="btn btn-info btn-block ">SIGN IN <i class="fa fa-fw fa-arrow-circle-right"></i></button>
</div>
<!-- /.col -->
</div>
<div id="msg_alert">
<!-- error will be shown here ! -->
</div>
</form>
Code (JavaScript)
$('document').ready(function()
{
/* validation */
$("#frm_login").validate({
rules:
{
password: {
required: true,
},
username: {
required: true,
},
},
messages:
{
password:{
required: '<div class="alert alert-error">Please enter your password</div>'
},
username: '<div class="alert alert-error">Please enter your username</div>',
},
submitHandler: submitForm
});
/* validation */
/* login submit */
function submitForm()
{
var data = $("#frm_login").serialize();
$.ajax({
type : 'POST',
url : 'login_process.php',
data : data,
beforeSend: function()
{
$("#msg_alert").fadeOut();
$("#btn-login").html('please wait, processing <img src="assets/img/loader.gif" />').attr("disabled", true);
},
success : function(response)
{
if(response==1){
$("#btn-login").html('please wait, processing <img src="assets/img/loader.gif" />').attr("disabled", true);
setTimeout(' window.location.href = "chooseproperty"; ',3000);
}
else{
$("#msg_alert").fadeIn(1000, function(){
$("#msg_alert").html('<div class="alert alert-error"> '+response+' </div>');
$("#btn-login").html('Sign in <i class="icon-signin"></i>').attr("disabled", false);
});
}
}
});
return false;
}
/* login submit */
});
Tag : PHP, MySQL, Ajax, jQuery
|
|
 |
 |
 |
 |
Date :
2018-02-22 17:06:26 |
By :
fourcasia |
View :
597 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
 |