website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

Live Username Availability Check Using PHP and Jquery Ajax

Live Username Availability Check Using PHP and Jquery Ajax

  • 332
  • 31-Mar-2022

INDEX.PHP

<?php
$con = mysqli_connect("localhost", "root", "", "check-username");
$sql = "SELECT * FROM emp_details";
$result = mysqli_query($con, $sql);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Check username availability using ajax php mysqli</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/
bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.
min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-5 center">
                <form action="" method="post">
                    <label for="username"><b>User Name</b></label>
                    <input type="text" name="username" placeholder="Username"
id="username" required />
                    <p id="availability"></p>
                    <button type="submit" name="register"
class="btn registerbtn shadow-none" id="register" disabled>Register</button>
                    <p id="msg"></p>
                </form>
            </div>
        </div>
    </div>
    </div>
</body>
</html>
<script>
    $("#register").click(function(e) {
        e.preventDefault();
        var username = document.getElementById("username").value;
        if (username == "") {
            $("#msg").html("Please Enter Username");
            $("#msg").show();
            $("#msg").focus();
            $("#msg").delay(4000).fadeOut("slow");
            return false;
        }
    });

    $(document).ready(function() {
        $('#username').keyup(function() {
            var username = $(this).val();
            if (username == "") {
                $('#availability').html('');
            } else {
                $.ajax({
                    url: 'check_user.php',
                    method: "POST",
                    data: {
                        user_name: username
                    },
                    success: function(data) {
                        if (data != '0') {
                            $('#availability').html('<span class="text-danger">
Username not available</span>');
                            $('#register').attr("disabled", true);
                        } else {
                            $('#availability').html('<span class="text-success">
Username Available</span>');
                            $('#register').attr("disabled", false);
                        }
                    }
                })
            }
        });

    });
</script>

check-user.php

<?php
$connect = mysqli_connect("localhost", "root", "", "check-username");
if(isset($_POST["user_name"]))
{
$username = mysqli_real_escape_string($connect, $_POST["user_name"]);
$query = "SELECT * FROM users WHERE user_name = '".$username."'";
$result = mysqli_query($connect, $query);
echo mysqli_num_rows($result);
}
?>

style.css

.center {
    margin: 0 auto;
}

input[type=text],
input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}

input[type=text]:focus,
input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}

.registerbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px 20px;
    margin: 2px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

.registerbtn:hover {
    opacity: 1;
}

.signin {
    background-color: #f1f1f1;
    text-align: center;
}

Download

Atechseva
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat with Me