How do i validate without needing to refresh page?

Question

I'm very new to programming, my current log in form is index.php

<form action="login.php" method="post" name="form1">
    <div class="form-group">
        <div class="form-label-group">
            <input type="text" id="inputEmail" class="form-control"  name="username" placeholder="Username" required="required" autofocus="autofocus">
            <label for="inputEmail">Username</label>
        </div>
    </div>
    <div class="form-group">
        <div class="form-label-group">
            <input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required="required">
            <label for="inputPassword">Password</label>
        </div>
    </div>
    <input type="submit" class="btn btn-primary btn-block" name="login" value="Login">
</form>

login.php is

<?php
include "connect.php";

if(!isset($_POST['username']) || !isset($_POST['password']))
    die("<script>alert('Incorrect Username or Password!')</script>
         <script>window.open('index.php','_self')</script>");
echo "<script>alert('Incorrect Username or Password!');</script>
                 <script>window.open('login.php','_self');</script>";

    $UN = $_POST['username'];
    $PW = $_POST['password'];

if(strlen($UN)==0 || strlen($PW)==0)
    die("<script>alert('Username or Password cannot be empty!')</script>
         <script>window.open('index.php','_self')</script>"); 
//data selection

$sql = "SELECT * FROM accounts WHERE Username='".$UN."' AND Password='".$PW."'";
$result = mysqli_query($con,$sql);
if ($rows = mysqli_fetch_array($result)) {
    if ($rows['userType'] == "admin") {
        session_start();
        $_SESSION['login_admin']= $UN;
        header("location:home.php");
    }else{
        session_start();
        $_SESSION['login_user']= $UN;
        header("location:home-user.php");
    }
}else{
    die("Log in Failed: Invalid Username or Password.<br />".
            "<a href=\"index.php\">Try Again?</a>");
}
?>

how can I implement login.php into my form so that it does not refresh? my current program refreshes when my password is incorrect because of this

 <script>window.open('index.php','_self')</script>");

Instead of refreshing I want to use a toast notifying the user that the username/password is incorrect

enter `x' OR Username = 'admin` in password field on login form. You need to use prepared queries. — Lawrence Cherone, Mar 04 '20 at 21:45
Does this answer your question? [jQuery Ajax POST example with PHP](https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php) — Don't Panic, Mar 04 '20 at 22:45

score 1 · Accepted Answer · answered Mar 04 '20 at 21:40

As per Jay's comment, you will need AJAX and a PHP file to handle your request. (Javascript/jQuery)

Read up on $.ajax()

Include the jQuery library found at jQuery in the head section before your javascript code: Just make sure to name the jQuery library the same as the src.

<script src="jquery.js"></script>

After this you can run AJAX. An AJAX request talks to a php file on the server-side. You can POST items to it and receive items back, normally by using echo in the php file. For additional/optional information, read up on PHP (arrays and json_encode()) which will send an json encoded array back to your AJAX request and read up on jQuery (JSON.parse()) to handle this encoded array on the browser side.

An AJAX request looks like this:

<script type="text/javascript">
    $.ajax({
        url: "phpFile.php",
        data: {
            myPost : 'value of post'
        },
        success: function(data) {
            alert(data);
        }
    });
</script>

How do i validate without needing to refresh page?

1 Answers1