password.html

<!DOCTYPE html>
<html>
<style>
    input[type=text],
    select {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    input[type=submit] {
        width: 100%;
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    input[type=submit]:hover {
        background-color: #45a049;
    }

    div {
        border-radius: 5px;
        background-color: #f2f2f2;
        padding: 20px;
    }
</style>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Edit profile</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-2.2.4.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
</head>

<body>

    <h3 style="background-color: #ccc; text-align: center; text-decoration-color: black;"><b></b>Enter password to
        proceed</b></b></h3>

    <div>
        <form id="formupdate" action="api/password.php" method="post">
            <div class="form-group">
                <label>Enter new password:</label>
                <input type="password" name="newpassword" class="form-control" placeholder="enter password" required>
            </div>
            <div class="form-group">
                <label>Enter old password:</label>
                <input type="password" name="oldpassword" class="form-control" placeholder="enter password" required>
            </div>
            <input type="submit" name="submit" value="Click to proceed" class="btn btn-success" id="submit">
        </form>
    </div>


    <script type="text/javascript">

        $(document).ready(function () {
            var form = $('#formupdate');
            $('#submit').click(function () {
                $.ajax({
                    url: form.attr("action"),
                    type: 'post',
                    data: $("#formupdate input").serialize(),
                    success: function (data) {
                        console.log(data);
                    }
                });
            });
        });

    </script>
</body>

</html>