How to display error in modal form using ajax and php if validation fail while redirecting to other page if success

Admin 1
Viewed 696

i am working in a signin page which is a modal form when user click on a signin button a modal form appears here is it

<!-- Signin Window Code -->
            <div class="modal fade" id="signup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                     <form action ="login.php" method="POST" id="frmLogin">
                            <div class="new-logwrap">   
                                <div class="form-group">
                                <label>Email</label>
                                <div class="input-with-icon">
                                <input type="email" class="form-control" name="login_email" id = "email_login" placeholder="Enter Your Email" required>
                                <i class="theme-cl ti-email"></i>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Password</label>
                                    <div class="input-with-icon">
                                        <input type="password" class="form-control" name="login_pass" id = "pass_login" placeholder="Enter Your Password" required>
                                        <i class="theme-cl ti-lock"></i>
                                    </div>
                                </div>
                                <div class="form-groups">
                                    <button type="submit" name="login" id="logBtn" class="btn btn-primary theme-bg full-width .login">Login</button>
                                </div>                  
                        <!-- error message will show here -->
                                <div id="ack"></div>

and i am using ajax for validating whether user is validate or not

        $('button#logBtn').click(function(){

            if($("#email_login").val() == "" || $("#pass_login").val() == "")
             $("div#ack").html("please enter username or password");
            else
            $.post($("#frmLogin").attr("action"),
            $("#frmLogin :input").serializeArray(),
            function(data) {    
                $("div#ack").html(data);
            });

            $("#frmLogin").submit(function (){
              return false;
            });
   });

when user validation fails it display error on the modal form but the problem is if validation is success the page to be redirected is overwritten on the modal form i.e it is not redirecting but showing the next page on the modal itself here is my php code

<?php
// for testing purpose
require 'dbserver.inc.php';
$email     = mysqli_real_escape_string($conn,$_POST['login_email']);
$password  = mysqli_real_escape_string($conn,$_POST['login_pass']); 
$sql = "SELECT count(*) from registergac1 WHERE (email='$email ' AND password = '$password')";
$res  = mysqli_query($conn,$sql);
$row = mysqli_fetch_array($res);
if($row[0] > 0)
{
    header("location: register.php"); //some page to redirect
}
else
{
    echo '<div class="alert alert-danger text-center" role="alert">
    Enter correct email or password!
  </div>';
}

?>
bootstrap-modal php javascript
1 Answers

You cannot redirect from php directly as you have used ajax the response will send back to success-function of ajax. Now ,to solved this do like below :

Php Code :

if($row[0] > 0)
{
    echo "success";//send back to ajax
}
else
{
     echo "failed";//send back to ajax
}

And check at your ajax side what values has come and depending on that either redirect or show error message.

Ajax Code :

$('button#logBtn').click(function() {

  if ($("#email_login").val() == "" || $("#pass_login").val() == "")
    $("div#ack").html("please enter username or password");
  else
    $.post($("#frmLogin").attr("action"),
      $("#frmLogin :input").serializeArray(),
      function(data) {
        var datas = $.trim(data); //remove whitespaces if any 
        if (datas == "success") {
          window.location.href = "register.php"; //redirect
        } else {
          $("div#ack").html('<div class="alert alert-danger text-center" role="alert">Enter correct email or password!</div>'); //show error message 
        }
      });

  $("#frmLogin").submit(function() {
    return false;
  });
});
user_106064000
Related