User Registration Form in PHP using AJAX and jQuery

User Registration Form in PHP using AJAX

Today, we are going to create user registration form in PHP using AJAX. With the help of AJAX we will successfully create the user in database without loading the web page.

Step 1:

First we will create simple HTML form to take the user input.

File: user_registration_form.html

 <!DOCTYPE html>
<html>

<head>
    <title>User Registration form in PHP using AJAX and jQuery</title>
    <!-- including jQuery library -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="ajax_response.js"></script>
</head>

<body>
    <!-- Creating user registration form -->
    <form id="registrationForm">
        First Name:<br>
        <input type="text" name="firstName" value=""><br> Last Name:<br>
        <input type="text" name="lastName" value=""><br> Email ID:<br>
        <input type="text" name="emailId" value=""><br> Password:
        <br>
        <input type="password" name="pwd" value=""><br> Confirm Password:<br>
        <input type="password" name="cnfpwd" value=""><br>
        <br>
        <input id="submitButton" type="button" value="Submit">
    </form>

    <!-- The result of the AJAX response will be rendered inside this div -->
    <div id="result"></div>

</body>

</html>

Step 2:

After creating HTML form, we will create ajax_reponse.js file which will take user input on click of submit button and will send the post request to process_registration_form.php file.

File: ajax_response.js


        $(document).ready(function() {
            $("#submitButton").click(function() {

                // using serialize function of jQuery to get all values of form
                var serializedData = $("#registrationForm").serialize();

                // Variable to hold request
                var request;
                // Fire off the request to process_registration_form.php
                request = $.ajax({
                    url: "process_registration_form.php",
                    type: "post",
                    data: serializedData
                });

                // Callback handler that will be called on success
                request.done(function(jqXHR, textStatus, response) {
                    // you will get response from your php page (what you echo or print)
                     // show successfully for submit message
                    $("#result").html(response);
                });

                // Callback handler that will be called on failure
                request.fail(function(jqXHR, textStatus, errorThrown) {
                    // Log the error to the console
                    // show error
                    $("#result").html('There is some error while submit');
                    console.error(
                        "The following error occurred: " +
                        textStatus, errorThrown
                    );
                });

                return false;

            });
        });

Step 3:

We have to create a connect.php file to set the database environment variables for making the database connection

File : connect.php

<?php
$host = "host=localhost";
$port = "port=5444";
$dbname = "dbname=mydatabase";
$credentials = "user=root password=12345";
try {
    $con = pg_connect("$host $port $dbname $credentials");
    if (!$con) {
        throw new Exception("Database Connection Error");
    }
}
catch(Exception $e) {
    echo "caught exception", $e->getMessage(), "\n";
    die();
}
?>

Step 4:

Now we will create process_registration_form.php file which will process the AJAX request and insert the user records in the database table.

After that it will return the response to ajax_request.js file which will again sent the response result to user.

File : process_registration_form.php

<?php
include ('connect.php');
$firstName = trim($_POST['firstName']);
$lastName = trim($_POST['lastName']);
$emailId = trim($_POST['emailId']);
$password = trim($_POST['pwd']);
if ((isset($firstName) && !empty($firstName)) && (isset($lastName) && !empty($lastName)) && (isset($emailId) && !empty($emailId)) && (isset($password) && !empty($password))) {
    $query = "insert into user (first_name, last_name, email_id, password) values ('$firstName', '$lastName', '$emailId', '$password')";
    $result = pg_query($query);
    if (!$result) {
        $errormessage = pg_last_error();
        echo "Error with query: " . $errormessage;
    } else {
        echo "User Registration Successfull!!!";
    }
} else {
    echo "Invalid input. Please enter all the input fields in form";
}
?>

About Author

Rahul Yadav

Technical Architect

Kuala Lumpur, Malaysia

Connect Me:

I'm a Full Stack Web Developer working in a MNC and passionate of developing modern web and mobile applications.

I have designed and developed CodephpOnline & CodephpOnline Wiki platform to expatiate my coding and technology learning experiences.

In my leisure time, I write technical articles on web development such as PHP, Laravel, CodeIgniter, Mediawiki, Linux, Angular, Ionic, ReactJS, NodeJS, AJAX, jQuery, Cloud and more.