JSFiddle - React, Tailwind, and code Playground

by Mohamed Rias

HTML

<script src="https://simplemodal.googlecode.com/files/jquery.simplemodal-1.4.4.js"></script>
<div id="login_modal" style="display: none;">
<div class="heading">Sign In</div>
<div id="login_response"></div>
<form id="login_form" method="post">
<table align="center" style="margin-top: 25px;" border="0">
<tr><td>
<label>Username: </label><br/><br/>
<label>Password: </label>
</td><td>
<input type="text" name="user" id="user" /><br/><br/>
<input type="password" id="password" name="password" />
</td></tr>
<tr><td></td><td align="left">
<input type="submit" name="login" id="login" value="Sign In" class="button blue" />
</td></tr>
</table>
</form>
</div>
<div id="login_btn">Login</div>

JavaScript

$(document).ready(function(){
    // Open login modal when login button is clicked
    $("#login_btn").click(function(){
        $('#login_modal').modal();
    });

    // Submit the login information when the sign in button is clicked
    $("#login").click(function(event){ 
        event.preventDefault();
        var user=$("#user").val();
        var password=$("#password").val();
        var login_info="user="+user+"&password="+password;
    
        alert("user : "+user+ " :  with password : "+password);
        $.ajax({ 
            type: "POST",
            url: "../php/authentication.php",
            data: login_info, 
            success: function(msg){ 
                var msg=trim(msg);  
                // Redirect user if authentication is successful  
                if(msg == 'OK') { 
                    window.location = '../../action-log.php';
                 } 
                 // Print error message
                 else { 
                     $('#login_response').html(msg);
                 }     
            }     
        });
    }); 
});