JSFiddle - React, Tailwind, and code Playground

by windrunn3r1990

HTML

<body>
<div id="loginbox">
    <input id="password" type="password" placeholder="Enter Password" />

    <button id="submitButton"> Submit </button>

</div>
<div id="container"></div>

</body>

CSS

#loginbox{
    width: 240px;
    height: 140px;
    margin: 0px auto;
    margin-top: 300px;
}

JavaScript

$("#submitButton").click(function (){

        var password = $("#password").val();


			$.ajax({
                url: 'path/to/your/script.php',
                cache: false,
                async: true,
                beforeSend: function () {
                    //do what you want to do before sending the data to the server
                    
                    console.log(password)
                },
                type: "POST",
                data: { password: password }, //data to post to server
                error: function (data) {
                    //do something if an error happends
                }, 
                success: function (data) {
                	//do something with server's response
                    console.log(data)
                }
            });
    });