pradeepmurugan/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>

    <head>
        <title>Manage User</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <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.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>

</head>

<body>
    <div class="container-fluid">
        <center>
            <div class="col-sm-4">
                <h3>Manage users</h3>
        </center>
        </div>
        <hr style="BORDER-RIGHT: medium none; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; HEIGHT: 1px">
        <div class="row ">
            <div class="col-sm-1">
            </div>
            <div class="col-sm-1">
                <button type="button " class="btn btn-success " id="create">Create</button>
            </div>
            <div class="col-sm-1 ">
                <button type="button " class="btn btn-danger" id="remove">Remove</button>
            </div>
            <div class="col-sm-1 ">
                <button type="button " class="btn btn-info ">Update</button>
            </div>
            <div class="col-sm-1 ">
                <button type="button " class="btn btn-primary ">Display</button>
            </div>
            <div class="col-sm-7 "></div>
        </div>
    </div>
    <br>
    <div class="container ">
        <form id="createform" name="createform" action="/getdata/" method="post">

            <div class="col-xs-3 ">
                <div class="row">
                    <label for="username">Username:</label>
                    <input type="text" class="form-control" id="username" placeholder="Enter username" name="username">
                </div>


                <div class="row">
                    <label for="pwd">Password:</label>
                    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="password">
                </div>
                <div class="row">
                    <label for="fullname">Full name:</label>
                    <input type="text" class="form-control" id="fullname" placeholder="Enter fullname" name="fullname">
                </div>

                <div class="row">
                    <label for="active">
                        <input type="checkbox" id="active" name="active" value="2">&nbsp;&nbsp;Is Active&nbsp;&nbsp;&nbsp;</label>
                    <label for="temp">
                        <input type="checkbox" id="temp" name="temp" value="2">&nbsp;&nbsp;Is Temp</label>
                </div>

                <div class="row">
                    <input type="submit" value="submit">
                </div>
            </div>
        </form>
    </div>
    <div class="container ">
        <form id="removeform" name="removeform" action="/deleteuser/" method="post">
            <div class="col-xs-6 col-md-3 col-sm-3">
                <div class="row">
                    <br>
                    <label for="username">Username:</label>
                    <input type="text" class="form-control" id="username" placeholder="Enter username" name="username">
                </div>
                <div class="row">
                    <br>
                    <input type="submit" value="submit">
                </div>
            </div>
        </form>
    </div>
    <script>
        $(document).ready(function () {
            $("#createform").hide();
            $("#removeform").hide();
            $("#create").click(function () {
                $("#createform").show();
            });
            var contextroot = ""
            $("#createform").submit(function (e) {
                e.preventDefault();
                var form = $(this);
                var action = form.attr("action");
                var data = form.serializeArray();
                $.ajax({
                    url: contextroot + action,
                    dataType: 'json',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(getFormData(data)),
                    success: function (data) {
                        console.log("DATA POSTED SUCCESSFULLY" + data);
                    },
                    error: function (jqXhr, textStatus, errorThrown) {
                        console.log(errorThrown);
                    }
                });
            });

            $("#remove").click(function () {
                $("#createform").hide();
                $("#removeform").show();

            });
            $("#removeform").submit(function (e) {
                e.preventDefault();
                var contextroot = ""
                var form = $(this);
                var action = form.attr("action");
                var data = form.serializeArray();
                $.ajax({
                    url: contextroot + action,
                    dataType: 'json',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(getFormData(data)),
                    success: function (data) {
                        console.log("DATA POSTED SUCCESSFULLY" + data);
                    },
                    error: function (jqXhr, textStatus, errorThrown) {
                        console.log(errorThrown);
                    }
                });
            });
        });
        //utility function
        function getFormData(data) {
            var unindexed_array = data;
            var indexed_array = {};
            $.map(unindexed_array, function (n, i) {
                indexed_array[n['name']] = n['value'];
            });
            return indexed_array;
        }
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>

	<head>
	<title>Manage User</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<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.2.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>

	</head>

	<body>
	<div class="container-fluid">
	<center>
	<div class="col-sm-4">
	<h3>Manage users</h3>
	</center>
	</div>
	<hr style="BORDER-RIGHT: medium none; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; HEIGHT: 1px">
	<div class="row ">
	<div class="col-sm-1">
	</div>
	<div class="col-sm-1">
	<button type="button " class="btn btn-success " id="create">Create</button>
	</div>
	<div class="col-sm-1 ">
	<button type="button " class="btn btn-danger" id="remove">Remove</button>
	</div>
	<div class="col-sm-1 ">
	<button type="button " class="btn btn-info ">Update</button>
	</div>
	<div class="col-sm-1 ">
	<button type="button " class="btn btn-primary ">Display</button>
	</div>
	<div class="col-sm-7 "></div>
	</div>
	</div>
	<br>
	<div class="container ">
	<form id="createform" name="createform" action="/getdata/" method="post">

	<div class="col-xs-3 ">
	<div class="row">
	<label for="username">Username:</label>
	<input type="text" class="form-control" id="username" placeholder="Enter username" name="username">
	</div>



	<div class="row">
	<label for="pwd">Password:</label>
	<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="password">
	</div>
	<div class="row">
	<label for="fullname">Full name:</label>
	<input type="text" class="form-control" id="fullname" placeholder="Enter fullname" name="fullname">
	</div>

	<div class="row">
	<label for="active">
	<input type="checkbox" id="active" name="active" value="2">  Is Active   </label>
	<label for="temp">
	<input type="checkbox" id="temp" name="temp" value="2">  Is Temp</label>
	</div>

	<div class="row">
	<input type="submit" value="submit">
	</div>
	</div>
	</form>
	</div>
	<div class="container ">
	<form id="removeform" name="removeform" action="/deleteuser/" method="post">
	<div class="col-xs-6 col-md-3 col-sm-3">
	<div class="row">
	<br>
	<label for="username">Username:</label>
	<input type="text" class="form-control" id="username" placeholder="Enter username" name="username">
	</div>
	<div class="row">
	<br>
	<input type="submit" value="submit">
	</div>
	</div>
	</form>
	</div>
	<script>
	$(document).ready(function () {
	$("#createform").hide();
	$("#removeform").hide();
	$("#create").click(function () {
	$("#createform").show();
	});
	var contextroot = ""
	$("#createform").submit(function (e) {
	e.preventDefault();
	var form = $(this);
	var action = form.attr("action");
	var data = form.serializeArray();
	$.ajax({
	url: contextroot + action,
	dataType: 'json',
	type: 'POST',
	contentType: 'application/json',
	data: JSON.stringify(getFormData(data)),
	success: function (data) {
	console.log("DATA POSTED SUCCESSFULLY" + data);
	},
	error: function (jqXhr, textStatus, errorThrown) {
	console.log(errorThrown);
	}
	});
	});

	$("#remove").click(function () {
	$("#createform").hide();
	$("#removeform").show();

	});
	$("#removeform").submit(function (e) {
	e.preventDefault();
	var contextroot = ""
	var form = $(this);
	var action = form.attr("action");
	var data = form.serializeArray();
	$.ajax({
	url: contextroot + action,
	dataType: 'json',
	type: 'POST',
	contentType: 'application/json',
	data: JSON.stringify(getFormData(data)),
	success: function (data) {
	console.log("DATA POSTED SUCCESSFULLY" + data);
	},
	error: function (jqXhr, textStatus, errorThrown) {
	console.log(errorThrown);
	}
	});
	});
	});
	//utility function
	function getFormData(data) {
	var unindexed_array = data;
	var indexed_array = {};
	$.map(unindexed_array, function (n, i) {
	indexed_array[n['name']] = n['value'];
	});
	return indexed_array;
	}
	</script>
	</body>

	</html>