I am trying to use ajax form submit to submit a form without refreshing the page. However when I click the submit button for the first time, it alerts the error (in alert it shows the whole html page where I have the submit form). And if I close the alert and hit the same submit button again without refreshing the page, it submits the form perfectly.
So, every time I refresh the page I have to hit the submit button and then close the error alert and then submit it again. I am pretty sure its some syntax error in the ajax file.
$('document').ready(function() { /* validation */ $("#login-form").validate({ rules: { upass: { required: true }, uemail: { required: true, email: true }, }, messages: { upass: { required: "please enter your password" }, uemail: "please enter your email address", }, errorPlacement: function(error, element) { $(element).closest('.form-group').find('.help-block').html(error.html()); }, highlight: function(element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, submitHandler: submitForm }); /* validation */ /* login submit */ function submitForm() { var data = $("#login-form").serialize(); $.ajax({ type: 'POST', url: 'login.php', data: data, dataType: 'json', success: function(data) { // console.log(data); // alert(JSON.stringify(response)); // if(response == 1){ if (data.status == 'success') { // alert('Good!'); alert(JSON.stringify(data)); window.location.href = "home.php"; } else { window.location.href = "login_failed.php"; } }, error: function(data) { // console.log(JSON.stringify(data)); alert(JSON.stringify(data)); } }); return false; } });HTML file
<!DOCTYPE HTML> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/jquery.validate.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <link rel="stylesheet" href="assets/signup-form.css" type="text/css" /> </head> <body> <!--container starts--> <div class="container"> <!--Header starts--> <nav class="navbar navbar-fixed-top"> <div class="container-fluid"> <div class="logo"> <a href="index.php"><img src="images/logo.png" style="float:left"/></a> </div> <form method="post" action="login.php" id="login-form" class="form-inline" autocomplete="off"> <div class="form-group"><strong style="color:white; font-family:tahoma">Email:</strong> <input type="email" class="form-control" placeholder="Email address" name="uemail" id="user_email" /> </div> <!--<input type="email" name="uemail" placeholder="Email" required/>--> <!--<input type="email" name="u_email" placeholder="Email" required="required"/>--> <div class="form-group"><strong style="color:white; font-family:tahoma">Password:</strong> <input type="password" class="form-control" placeholder="Password" name="upass" /> </div> <!--<input type="password" name="upass" placeholder="Password" required/>--> <!--<input type="password" name="u_pass" placeholder="********" required="required"/>--> <button type="submit" name="login" class="btn btn-default">Login</button></br> <!--<button type="submit" name="login"> Login </button>--> <a href="forgot_password.php">Forgot your password?</a> </form> </div> </nav> <script src="js_files/login.js"></script> <!-- <script src="js_files/login_failed.js"></script> --> <!-- <script src="register_script.js"></script> --> <script src="js_files/sign_up.js"></script> </body> </html> And this the php file login.php
<?php require_once 'class/head.class.php'; if(isset($_POST['login'])) { $u_email = $_POST['uemail']; $u_pass = $_POST['upass']; try { if(init::loginCheck($u_email) < 3){ if(users::login($u_email, $u_pass)) { init::loginSuccess($u_email); // init::redirect('home.php'); $response['status'] = 'success'; // $response['message'] = '<div class="alert alert-danger"><span class="glyphicon glyphicon-ok"></span> registered sucessfully, please confirm your email</div>'; // echo 1; } else { init::loginAttempt($u_email); // init::redirect('home.php'); $response['status'] = 'redirect'; // could not register // $response['message'] = '<div class="alert alert-warning"><span class="glyphicon glyphicon-info-sign"></span> You have entered incorrect login details. Please try again</div>'; // echo 0; } } else { $response['status'] = 'redirect'; } } catch(PDOException $e) { echo $e->getMessage(); } echo json_encode($response); } ?> The error it returns is the html page that contains form:
{"readyState":4,"responseText":"\n\n \n\n\n\nhttps://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js\">\n \n\n\nhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js\" integrity=\"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa\" crossorigin=\"anonymous\">\n\n\n\nhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u\" crossorigin=\"anonymous\">\n\n\nhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css\" integrity=\"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp\" crossorigin=\"anonymous\">\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n \n \n Email:\n \n \n \n\n\n \n -->\n -->\n\n Password:\n \n\n \n\n \n -->\n -->\n Login\n Login </button>-->\n\n Forgot your password?\n \n \n \n\n \n\n \n </script> -->\n </script> -->\n \n\n \n","status":200,"statusText":"OK"}
