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

Need an Eye-caching Website - Contact Me Today !

check-username-availability-using-ajax

Live Username Availability Check Using PHP and Jquery Ajax

  • 405
  • 31-Mar-2022
  • Details

    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;
    }

whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat