By submitting the sign-in registration form, the data will be sent to PHP via AJAX after clientside validation . Login registration system .Ajax is the best way to submit the PHP form with that, and it will do not reload the browser.


Here we using 4 file for Login, signup using PHP Ajax.

  1. database.php
  2. save.php
  3. logout.php
  4. index.php


Database Script for user_data Table

Import a user_data table to use this example locally. 

CREATE TABLE `user_data` (
  `id` int(11) NOT NULL,
  `username` varchar(100) NOT NULL,
  `password` varchar(250) NOT NULL,
  `email` varchar(50) NOT NULL,
  `phone` varchar(100) NOT NULL,
  `city` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


#database.php

<?php
	$servername = "localhost";
	$username = "root";
	$password = "";
	$db="tutorial";
	/*Create connection*/
	$conn = mysqli_connect($servername, $username, $password,$db);
?>

The mysqli_connect() function in PHP is used to connect you to the database.


#save.php

<?php

include 'database.php';
session_start();
if ($_POST['type'] == 1) {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $city = $_POST['city'];
    $password = $_POST['password'];

    $duplicate = mysqli_query($conn, "select * from user_data where email='$email'");
    if (mysqli_num_rows($duplicate) > 0) {
        echo json_encode(array("statusCode" => 201));
    } else {
        $sql = "INSERT INTO `user_data`( `name`, `email`, `phone`, `city`, `password`) 
			VALUES ('$name','$email','$phone','$city', '$password')";
        if (mysqli_query($conn, $sql)) {
            echo json_encode(array("statusCode" => 200));
        } else {
            echo json_encode(array("statusCode" => 201));
        }
    }
    mysqli_close($conn);
}
if ($_POST['type'] == 2) {
    $email = $_POST['email'];
    $password = $_POST['password'];
    $check = mysqli_query($conn, "select * from user_data where email='$email' and password='$password'");
    if (mysqli_num_rows($check) > 0) {
        $_SESSION['email'] = $email;
        echo json_encode(array("statusCode" => 200));
    } else {
        echo json_encode(array("statusCode" => 201));
    }
    mysqli_close($conn);
}
?>

#logout.php

<?php
session_start();
unset($_SESSION["email"]);
unset($_SESSION["password"]);
header("Location:login.php");
?>


#index.php

<!DOCTYPE html>
<html>
    <head>
        <title>Insert data in MySQL database using Ajax</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <div style="margin: auto;width: 60%;">
            <div class="alert alert-success alert-dismissible" id="success" style="display:none;">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            </div>
            <div class="alert alert-danger alert-dismissible" id="error" style="display:none;">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            </div>
            <button type="button" class="btn btn-success btn-sm" id="register">Register</button> <button type="button" class="btn btn-success btn-sm" id="login">Login</button>

            <form id="register_form" name="form1" method="post">
                <div class="form-group">
                    <label for="email">Name:</label>
                    <input type="text" class="form-control" id="name" placeholder="Name" name="name">
                </div>
                <div class="form-group">
                    <label for="pwd">Email:</label>
                    <input type="email" class="form-control" id="email" placeholder="Email" name="email">
                </div>
                <div class="form-group">
                    <label for="pwd">Phone:</label>
                    <input type="text" class="form-control" id="phone" placeholder="Phone" name="phone">
                </div>
                <div class="form-group" >
                    <label for="pwd">City:</label>
                    <select name="city" id="city" class="form-control">
                        <option value="">Select</option>
                        <option value="Delhi">Delhi</option>
                        <option value="Mumbai">Mumbai</option>
                        <option value="Pune">Pune</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="pwd">Password:</label>
                    <input type="password" class="form-control" id="password" placeholder="Password" name="password">
                </div>
                <input type="button" name="save" class="btn btn-primary" value="Register" id="butsave">
            </form>
            <form id="login_form" name="form1" method="post" style="display:none;">

                <div class="form-group">
                    <label for="pwd">Email:</label>
                    <input type="email" class="form-control" id="email_log" placeholder="Email" name="email">
                </div>
                <div class="form-group">
                    <label for="pwd">Password:</label>
                    <input type="password" class="form-control" id="password_log" placeholder="Password" name="password">
                </div>
                <input type="button" name="save" class="btn btn-primary" value="Login" id="butlogin">
            </form>
        </div>

        <script>
            $(document).ready(function() {
                $('#login').on('click', function() {
                    $("#login_form").show();
                    $("#register_form").hide();
                });
                $('#register').on('click', function() {
                    $("#register_form").show();
                    $("#login_form").hide();
                });
                $('#butsave').on('click', function() {
                    $("#butsave").attr("disabled", "disabled");
                    var name = $('#name').val();
                    var email = $('#email').val();
                    var phone = $('#phone').val();
                    var city = $('#city').val();
                    var password = $('#password').val();
                    if (name != "" && email != "" && phone != "" && password != "") {
                        $.ajax({
                            url: "save.php",
                            type: "POST",
                            data: {
                                type: 1,
                                name: name,
                                email: email,
                                phone: phone,
                                city: city,
                                password: password
                            },
                            cache: false,
                            success: function(dataResult) {
                                var dataResult = JSON.parse(dataResult);
                                if (dataResult.statusCode == 200) {
                                    $("#butsave").removeAttr("disabled");
                                    $('#register_form').find('input:text').val('');
                                    $("#success").show();
                                    $('#success').html('Registration successful !');
                                }
                                else if (dataResult.statusCode == 201) {
                                    $("#error").show();
                                    $('#error').html('Email ID already exists !');
                                }

                            }
                        });
                    }
                    else {
                        alert('Please fill all the field !');
                    }
                });
                $('#butlogin').on('click', function() {
                    var email = $('#email_log').val();
                    var password = $('#password_log').val();
                    if (email != "" && password != "") {
                        $.ajax({
                            url: "save.php",
                            type: "POST",
                            data: {
                                type: 2,
                                email: email,
                                password: password
                            },
                            cache: false,
                            success: function(dataResult) {
                                var dataResult = JSON.parse(dataResult);
                                if (dataResult.statusCode == 200) {
                                    location.href = "welcome.php";
                                }
                                else if (dataResult.statusCode == 201) {
                                    $("#error").show();
                                    $('#error').html('Invalid EmailId or Password !');
                                }

                            }
                        });
                    }
                    else {
                        alert('Please fill all the field !');
                    }
                });
            });
        </script>
    </body>
</html>