How to Create a Simple Login Form on Popup Box Using jQuery and PHP

admin | Posted on May 12, 2021 |

There was a requirement to create a LOGIN form in the Pop up box instead of creating a login page separately. This provides a great user experience by not redirecting to another login page. This write up will help you to create a login form in Popup box using jQuery. You may also like How to Send HTML Form array in Codeigniter using Ajax and How to Login with Facebook in CodeIgniter.

PHP and jQuery 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['submit']))
    {
        $email = $_POST['email'];
        $pass = $_POST['upass'];
        $dologin = "SELECT id,pass FROM user WHERE email = '".$email."' and pass = '".$pass."' ";
        $result = mysqli_query($con,$dologin);
        if($result)
        {
            echo "Successfully Logged In";
        }
        else
        {
            echo "Wrong Id Or Password";
        }
    }
?>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <style>
        #loginform
        {
            width:500px;
            height:330px;
            margin-top:100px;
            background-color:#585858;
            border-radius:3px;
            box-shadow:0px 0px 10px 0px #424242;
            padding:10px;
            box-sizing:border-box;
            font-family:helvetica;
            visibility:hidden;
            display:none;
        }
        #loginform #close_login
        {
            position:absolute;
            top:140px;
            left:735px;
            width:15px;
            height:15px;
        }
        #loginform p
        {
            margin-top:40px;
            font-size:22px;
            color:#E6E6E6;
        }
        #loginform #login
        {
            width:250px;
            height:40px;
            border:2px solid silver;
            border-radius:3px;
            padding:5px;
        }
        #loginform #password
        {
            margin-top:5px;
            width:250px;
            height:40px;
            border:2px solid silver;
            border-radius:3px;
            padding:5px;
        }
        #loginform #dologin
        {
            margin-left:-5px;
            margin-top:10px;
            width:250px;
            height:40px;
            border:none;
            border-radius:3px;
            color:#E6E6E6;
            background-color:grey;
            font-size:20px;
        }
    </style>
    <body>

    <center>
        <input type="button" id="show_login" value="Show Login">
        <div id = "loginform">
            <form method = "post" action = "">
                <p>Login</p>
                <input type = "text" id = "login" placeholder = "Email Id" name = "email">
                <input type = "password" id = "password" name = "upass" placeholder = "***">
                <input type = "submit" id= "dologin" name="submit" value = "Login">
            </form>
        </div>
    </center>

</body>
<script type="text/javascript">
    $(document).ready(function ()
    {
        $("#show_login").click(function () {
            showpopup();
        });
        $("#close_login").click(function () {
            hidepopup();
        });
    });

    function showpopup()
    {
        $("#loginform").fadeIn();
        $("#loginform").css({"visibility": "visible", "display": "block"});
    }

    function hidepopup()
    {
        $("#loginform").fadeOut();
        $("#loginform").css({"visibility": "hidden", "display": "none"});
    }
</script>
</html>

Leave a Reply Cancel reply