Untitled

<!DOCTYPE HTML>
            <html>
                <head>
                        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
                        <script src="script.js"></script>
                    <style>
                            .error {
                                color:red;
                            }

                            .button {
                                background-color: #4CAF50;
                                border: none;
                                color: white;
                                padding: 10px 25px;
                                text-align: center;
                                text-decoration: none;
                                display: inline-block;
                                font-size: 16px;
                                margin: 4px 2px;
                                cursor: pointer;
                            }
                            .div1 {

                                margin-top: -19px;
                                margin-bottom: -25px;
                                margin-left: -19px;
                            }

                            .copy {
                                border-radius: 4px;
                                padding: 6px 20px;
                               border-style: ridge;
                            }

                            .copy1{
                                 border-radius: 4px;
                                 padding: 6px 28px;
                                 border-style: ridge;
                            }

                            .copy2{
                                 border-radius: 4px;
                                 padding: 4px 2px;

                            }
                    </style>
                </head>
                <body  style="background-color:#1affff">

                    <div style="padding-left: 250px; padding-top:50px" class="div1">

                        <h2 style="color:#009999">Registration Form :</h2>

                        <p><span class="error">All fields are required </span></p>

                        <form action="" method="post" enctype="multipart/form-data">

                            <span style="color:#0099ff">Name: </span>
                                <input type="text" name="name" class= "name copy" style="margin-left: 52px"  value ="">
                            <span class="namee error"> </span>
                            <br><br>

                            <span style="color:#0099ff"> E-mail: </span>
                                <input type="text" name="email" class= "email copy" style="margin-left: 48px"  value ="">
                            <span class="emaile error"></span>
                            <br><br>

                            <span style="color:#0099ff"> Username: </span>
                                <input type="text" name="username"  class= "username copy" style="margin-left:26px"  value ="">
                            <span class="usernamee error"></span>
                            <br><br>

                            <span style="color:#0099ff"> Password: </span>
                                <input type="password" name="password"  class= "password copy" style="margin-left:30px">
                            <span class="passworde error"> </span>
                            <br><br>

                            <span style="color:#0099ff">  Age : </span>
                                <input type="number" name="age"  class= "age copy" style="margin-left:62px"  value ="">
                            <span class="agee error"> </span>
                            <br><br>

                            <span style="color:#0099ff">  Date Of Birth : </span>
                                <input type="date" name="date_of_birth"  class= "date_of_birth copy" style="margin-left:14px"  value ="">
                            <span class="date_of_birthe error"> </span>
                            <br><br>

                            <span style="color:#0099ff">  Department : </span>

                                <select name="department"  class= "department copy" style="margin-left:14px"  value ="">
                                    <option disabled selected value> -- select an option -- </option>
                                    <option value="EE">Electrical & Electronics</option>
                                    <option value="EC">Electronics & Communication</option>
                                    <option value="ME">Mechanical</option>
                                    <option value="CS">Computer Science</option>
                                    <option value="CV">Civil</option>
                                    <option value="IS">Information Science</option>
                                </select>
                            <span class="departmente error"> </span>
                            <br><br>

                            <input type="button" class="submit" name="submit" value="Register">

                        </form>

                    </div>

                </body>

                <script>
                    $(document).ready(function(){
                        $(".submit").click(function(){

                        var name = $(".name").val();
                        var email = $(".email").val();
                        var username = $(".username").val();
                        var password = $(".password").val();
                        var age = $(".age").val();
                        var date_of_birth = $(".date_of_birth").val();
                        var department = $(".department").val();

                    if(name==''){$('.namee').text('Enter name'); return  false}
                    if(email==''){$('.emaile').text('Enter email'); return  false}
                    if(username==''){$('.usernamee').text('Enter username'); return  false}
                    if(password==''){$('.passworde').text('Enter password'); return  false}
                    if(age==''){$('.agee').text('Enter age'); return  false}
                    if(date_of_birth==''){$('.date_of_birthe').text('Enter date_of_birth'); return  false}
                    if(department==''){$('.departmente').text('Enter department'); return  false}


                    // Returns successful data submission message when the entered information is stored in database.
                    var dataString = 'name='+ name + '&email='+ email + '&username='+ username + '&password='+ password + '&age='+ age + '&date_of_birth='+ date_of_birth + '&department='+ department;


                    // AJAX Code To Submit Form.
                    $.ajax({
                    type: "POST",
                    url: "gethint.php",
                    data: dataString,
                    cache: false,
                    success: function(result){
                    alert(result);
                    }
                    });

                    });
                    });
                </script>

            </html>

<?php


            $mysqli  = mysqli_connect("localhost","root","","ajax");

            $username =$_POST["username"];
            $password=$_POST["password"];
            $hashed_password = password_hash($password, PASSWORD_DEFAULT);
            $email=$_POST["email"];
            $name=$_POST["name"];
            $age=$_POST["age"];
            $date_of_birth=$_POST["date_of_birth"];
            $department=$_POST["department"];

            $check="SELECT * FROM users WHERE username = '$_POST[username]'";
            $rs = mysqli_query($mysqli,$check);
            $da = mysqli_fetch_array($rs, MYSQLI_NUM);
            if($da[0] > 0) {
                echo "Username Already in Exists<br/>";
            }
            else
            {
                $sql = "INSERT INTO users(`userid`,`username`, `password`, `email` , `name` , `age` , `date_of_birth` , `department`)
                         VALUES ('','".$username."', '".$hashed_password."', '".$email."' , '".$name."' , '".$age."' , '".$date_of_birth."' , '".$department."')";

                    if (mysqli_query($mysqli, $sql)) {
                    echo "Registered successfully";
                    } else {
                    echo "Error: " . $sql . "<br>" . mysqli_error($mysqli);
                    }
                    mysqli_close($mysqli);
            }


        ?>