When I press "login" the script will run and print out "fill in all fields" (which is great) but it seems to echo it on the screen, then refresh the page.

AJAX:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("form").submit(function(event){
      var username = $("#username").val();
      var password = $("#password").val();
      var login = $("#login").val();
      $(".formMessage").load("inc/accounts.php",{
        username: username,
        password: password,
        login: login
      });
    });
  });
</script>

Form (only form on the page)

<form method="post" autocomplete="off">
        <div class="form-group"><input class="form-control" type="text" id="username" placeholder="Username" autofocus></div>
        <div class="form-group"><input class="form-control" type="password" id="password" placeholder="Password"></div>
        <div class="form-group"><button class="btn btn-outline-primary btn-block" type="submit" id="login">Login</button></div>
        <p class='formMessage'></p>
        <a href="#" class="forgot">Forgot your password?</a>
        <a href="register" class="forgot">Don't have an account?</a>
    </form>

PHP code (accounts.php)

if(isset($_POST['login'])){
    $username = $_POST['username'];
    $password = $_POST['password'];

    $date = date("d/m/Y");
    $time = date("h:i a");

    if(empty($username) || empty($password)){
      echo "<span style='color: red;'>Fill in all fields!</span>";
    }elseif(!DB::query('SELECT username FROM users WHERE username=:username', array(':username'=>$username))){
      echo "<span style='color: red;'>Incorrect password/username!</span>";
    }elseif(!password_verify($password, DB::query('SELECT password FROM users WHERE username=:username', array(':username'=>$username))[0]['password'])){
      echo "<span style='color: red;'>Incorrect password/username!</span>";
    }else{
      $uid = DB::query('SELECT id FROM users WHERE username=:username', array(':username'=>$username))[0]['id'];

      $cstrong = True;
      $token = bin2hex(openssl_random_pseudo_bytes(64, $cstrong));
      DB::query('INSERT INTO logintokens VALUES(\'\', :token, :uid)', array(':token'=>sha1($token), ':uid'=>$uid));
      setcookie("uid", $token, time() + 60 * 60 * 24 * 5, '/', '.link.com');
      setcookie("uid_", '1', time() + 60 * 60 * 24 * 3, '/', '.link.com');

      echo "<span style='color: green;'>Successfully logged in!</span>";
      echo '<script>window.location.href = "home";</script>';
    }
  }

Video to show what happens: https://gyazo.com/8233450b6493bfe415105ea5dbb61b28

2 Answers

2
Zain Farooq On Best Solutions

You have missed event.preventDefault() which stops the default action of an element from happening. Your final code should look like this

 $(document).ready(function(){
$("form").submit(function(event){
  var username = $("#username").val();
  var password = $("#password").val();
  var login = $("#login").val();
  $(".formMessage").load("inc/accounts.php",{
    username: username,
    password: password,
    login: login
  });
  event.preventDefault();
 });
});

For more info you can visit here

2
Community On

Couple of suggestions for this

  • Give your form an id so you can reference it using $('#formid'), just for readability.
  • In your listener for form submit, the prevent the default action.

Here is an example of how to do that, you are already passing in the event in your code so we just need to prevent its default action (submitting + refreshing).

...
$(document).ready(function(){
  $("form").submit(function(event){
    event.preventDefault();
...