Untitled

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <title>JSP Page</title>
    </head>
    <body>
        <div class="form-horizontal" action="UserDetailsServlet" method="POST">
            <fieldset>

                <!-- Form Name -->
                <legend>Form Name</legend>

                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="textinput">Id:</label>
                    <div class="col-md-4">
                        <input id="id1" name="idText" type="number" placeholder="Enter your id here" class="form-control input-md">
                    </div>
                </div>

                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="textinput">Name:</label>
                    <div class="col-md-4">
                        <input id="name1" name="nameText" type="text" placeholder="Enter your name here" class="form-control input-md">
                        <!--<span class="help-block">help</span>-->
                    </div>
                </div>

                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="textinput">Email:</label>
                    <div class="col-md-4">
                        <input id="email1" name="emailText" type="email" placeholder="Enter your email here" class="form-control input-md">
                        <!--<span class="help-block">help</span>-->
                    </div>
                </div>

                <!-- Password input-->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="passwordinput">Password</label>
                    <div class="col-md-4">
                        <input id="password1" name="passwordText" type="password" placeholder="Enter your password" class="form-control input-md">
                        <!--<span class="help-block">help</span>-->
                    </div>
                </div>

                <!-- Button -->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="singlebutton"></label>
                    <div class="col-md-4">
                        <button id="btn" name="singlebutton" class="btn btn-primary">submit</button>
                    </div>
                </div>

            </fieldset>
        </div>
        <div id="div1" style="border:1px solid black;height:20px;width:20%;margin-left:40%">

        </div>
        <script>
            $(document).ready(function () {
                $.ajax({
                    url: "UserDetailsServlet",
                    method: "POST",
                });
                $("#btn").click(function () {
                    var eid = $("#id1").val();
                    var ename = $("#name1").val();
                    var eemail = $("#email1").val();
                    var epassword = $("#password1").val();
                    $.ajax({
                        url: "UserDetailsServlet",
                        method: "POST",
                        data: {
                            userid: eid,
                            username: ename,
                            useremail: eemail,
                            userpassword: epassword
                        },
                        success: function (data)
                        {
                            console.log(data);
                            window.location.reload();
                        }
                    });
                });

                $.ajax({
                    url: "UserDetailsServlet",
                    method: "GET",
                    success: function (data) {
                        if (data.status == 1)
                        {
                            for (var i = 0; i < data.userDetails.length; i++) {
                                var temp = "<div>" +data.userDetails[i].userID+"   "+ data.userDetails[i].userName + "      "+data.userDetails[i].userEmail +"      "+ data.userDetails[i].userPassword + "<div>";

                                $("#div1").append(temp);
                            }
                        }
                    }
                });
            });
        </script>
    </body>
</html>