CODEWITHSUNDEEP
phpjavascriptjqueryhtmlajax
John Smith
John Smith

Reputation: 8851

How to redirect and inform the user if his or her password is incorrect?

Assuming I have a block of code like this on a login page:

<form action="login_action.php" method="post">
    <div id="account">
        <div class="form-label">Username:</div>
        <div class="form-input"><input name="username" type="text" /></div>
        <div class="form-label">Password:</div>
        <div class="form-input"><input name="password" type="password" /></div>
        <div class="form-submit"><input type="submit" value="Submit" /></div>
    </div>
</form>

The login_action file queries the database with the given credentials and if they are correct performs $_SESSION['username'] = $username;

This works fine. However, if the user provides incorrect credentials, ideally the page would not redirect and instead it would display an error message on the page on the line before username. This is the part I am confused on how to tackle.

Would I instead have to capture the submit button press with JQuery and post the user credentials to the php file with AJAX? This would then get rid of the form on the login page. I suppose then I could return a string specifying whether or not the credentials were valid and if not, it would append a message to the account div that the credentials were incorrect.

Would that be the standard approach to this sort of problem? Since recently discovering AJAX I am using it for almost everything and I'm not sure if in this case it is the ideal solution. Overriding the submit button's default behavior and removing the form seems kinda hacky to me but I'm not sure. Is this how SO would solve this?

Upvotes: 1

Views: 3838

Answers (5)

eashwary
eashwary

Reputation: 1

//` 

if(isset($_GET['msg']))
{  
 $message=$_GET['msg'];
}

?>` add following to ur login form

// ---------------------- // add this code to display error message if password dont match

    <p id="m2">
                                <?php
                               if(isset($_GET['msg']))
{  
 echo $message;
}else{
                                   echo "enter password";
                                   }
                                   ?>
                                </p>




//------------------
add this code to your login.php script



$message="password do not match";
header("Location:index.php?msg=$message");

Upvotes: 0

Richard Calahan
Richard Calahan

Reputation: 166

Sending the values from the form to a php script via ajax is pretty much the perfect solution. The page wont reload, and the user will get a response quickly from the server. Here's your jQuery:

$('#form').submit(function(e){
  // there are many ways to assemble this input data array, this is an easy clunky way, 
  // you could also use $.each to iterate over all input elements, get their
  // vals, and pop them into the inputVals array. 

  var inputVals = [$('#input_id1').val(), $('#input_id2').val()];

  $.ajax({
    url:"your_php_script.php",
    type: 'POST',
    data:inputVals,
    success:function(data){
      // data returned from php script as a 'json_encode' string

    }
  });

  return false;

})

Upvotes: 0

hnprashanth
hnprashanth

Reputation: 831

What I normally do is, use condition statement & redirect back to form if the password is incorrect. Assume your form page is form.php, the redirect could be form.php?status=password. Then you can display an error message in your form

if ($_GET['status'] == 'password')
   echo "Incorrect Password";

Upvotes: 2

takteek
takteek

Reputation: 7110

The method that most basic login forms use is to have the login form post back to itself. If there is a problem with the username or password, just echo an error message to the page with PHP.

If for some reason you really want a separate handler page, you can use "flashes" where you store an error message temporarily in the session. The login page can then display that error message and erase it from the session.

Upvotes: 0

mattsven
mattsven

Reputation: 23293

You can do this almost anyway you like, the only advantage to the AJAX method (that I can see) is perhaps less bandwith hog.

$("form").submit(function(e){
    e.preventDefault();
    //AJAX & other code here
});

Upvotes: 0

Related Questions