Ajax form submit returns error on first submit but submits on second click

Question

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> &nbsp; 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> &nbsp; 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"}

Answer 1

add this in your ajax request

async: false,

this will fixed your error and also add this to view any error from ajax request

error: function(er, err, error){
  alert(error);
};

Ajax form submit returns error on first submit but submits on second click

Question

1 answers

solution1
0 2017-03-07 05:01:47

Ajax form submit returns error on first submit but submits on second click

Question

1 answers

solution1 0 2017-03-07 05:01:47

solution1
0 2017-03-07 05:01:47