How to Auto Suggestion of User Name and Email Id Using Ajax ,Mysql, jQuery and PHP

admin | Posted on May 13, 2021 |

In this tutorial we will create a auto suggestion technique for user registration that is applicable for both User Name and User Email Address. While registration time user registering their username in the username column, that time the same user name already exist in the database, for that we are creating auto generation of username like gmail and all same as email. You may also like How to Check UserName and Email Availability From Database using PHP and Ajax.

PHP, jQuery and HTML Code

<?php
    define('DB_SERVER', "localhost");
    define('DB_USER', "root");
    define('DB_PASS', "");
    define('DB_DATABASE', "whatsappdwld_db");
    $con = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE);

    if(isset($_POST['get_option']))
    {
        $name = $_POST['uname'];
        $mail = $_POST['umail'];
        $pass = $_POST['upass'];
        $store = mysqli_query($con,"INSERT INTO members (name,email,password) VALUES('$name','$mail','$pass')");
        echo "success";
    }
?>

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#uname").blur(function () {
                    name_check();
                });
                $("#umail").blur(function () {
                    mail_check();
                });
            });

            function name_check()
            {
                var val = document.getElementById("uname").value;
                if (val)
                {
                    $.ajax({
                        type: 'post',
                        url: 'validation.php',
                        data: {
                            checkname: val
                        },
                        success: function (response) {
                            if (response == val)
                            {
                                document.getElementById("name_status").innerHTML = "OK";
                            } else
                            {
                                document.getElementById("name_status").innerHTML = "Username already Exist try this " + response;
                            }
                        }
                    });
                }
            }

            function mail_check()
            {
                var val = document.getElementById("umail").value;
                if (val && val.indexOf("@") != -1)
                {
                    $.ajax({
                        type: 'post',
                        url: 'validation.php',
                        data: {
                            checkmail: val
                        },
                        success: function (response) {
                            if (response == val)
                            {
                                document.getElementById("mail_status").innerHTML = "OK";
                            } else
                            {
                                document.getElementById("mail_status").innerHTML = "Mail Id already Exist try this " + response;
                            }
                        }
                    });
                }
            }

            function checkform()
            {
                var name_val = document.getElementById("name_status").innerHTML;
                var mail_val = document.getElementById("mail_status").innerHTML;

                if ((name_val && mail_val) == "OK")
                {
                    return true;
                } else
                {
                    return false;
                }
            }
        </script>

    </head>
    <body>
        <p>How to Auto Suggestion of User Name and Email Id Using Ajax ,MYSQL and PHP</p>
        <form method='post' action="" onsubmit="return checkform();">
            <input type="text" name="uname" id="uname" placeholder="User Name">
            <br>
            <span id="name_status"></span>
            <input type="text" name="umail" id="umail" placeholder="Email Address">
            <br>
            <span id="mail_status"></span>
            <input type="password" name="upass" id="upass" placeholder="*******"><br>
            <input type="submit" name="do_registration" id="submit" value="Register">
        </form>
    </body>
</html>

PHP Code (validation.php)

<?php
    define('DB_SERVER', "localhost");
    define('DB_USER', "root");
    define('DB_PASS', "");
    define('DB_DATABASE', "whatsappdwld_db");
    $con = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE);


function suggest_name($data) {
    $new_data = $data . mt_rand(0, 10000);
    check_user_name($new_data);
}

function check_user_name($variable) {
    $select = mysqlI_query($con,"SELCT * FROM members WHERE name='$variable'");

    if (mysqli_num_rows($select)) {
        suggest_name($variable);
    } else {
        echo $variable;
    }
}


if (isset($_POST['checkname'])) {
    $term = $_POST['checkname'];
    check_user_name($term);
    exit();
}


function suggest_mail($data) {
    $new_data = str_replace("@", mt_rand(0, 10000) . "@", $data);
    check_user_mail($new_data);
}

function check_user_mail($variable) {
    $select = mysqli_query($con,"SELECT * FROM members WHERE emailid='$variable'");
    if (mysqlI_num_rows($select)) {
        suggest_mail($variable);
    } else {
        echo $variable;
    }
}


if (isset($_POST['checkmail'])) {
    $term = $_POST['checkmail'];
    check_user_mail($term);
    exit();
}
?>

Leave a Reply Cancel reply