sandeepwisetr/Simple Javascript Crud Operations

## Simple Javascript Crud Operations
<html>
    <body>
        <form method="post">
            <label>Username</label>
            <input name="username" id="username"><br>
            <label>Address</label>
            <textarea name="address" id="address"></textarea><br>
            <input type="hidden" value="0" id="recordnumber">
            <input type="button" id="submit" name="submit" onClick="add(this)" data="add" value="add">
        </form>
        <div id="message"></div>

        <table>
            <thead>
                <tr><th>Username</th><th>Address</th><th></th></tr>
            </thead>
            <tbody id="datatable">

            </tbody>
        </table>
        <script>
            function formSave() {
                this.data = {} || [];
                var getID = function () {
                    var date = new Date();
                    return date.getTime();
                }

                var getCurrentData = function () {
                    var data = {};
                    data["username"] = document.getElementById("username").value;
                    data["address"] = document.getElementById("address").value;
                    return data;
                }

                this.add = function () {
                    var data = getCurrentData();
                    if (Object.keys(data).length > 0) {
                        var id = getID();
                        this.data[id] = data;
                        this.clearField();
                        this.printTable();
                        return id;
                    }


                }
                this.update = function (id) {
                    var data = getCurrentData();
                    if (typeof id != "undefined" && Object.keys(data).length > 0) {
                        console.log(data);
                        this.data[id] = data;
                        this.printTable();
                        return true;
                    }
                }
                this.delete = function (id) {
                    if (typeof id != "undefined" && id > 0) {
                        delete this.data[id];
                        this.printTable();
                    }

                }
                this.get = function (id) {
                    if (typeof id != "undefined") {
                        var data = this.data[id];
                        return data;
                    }
                    return {};
                }
                this.getAll = function () {
                    return this.data;
                }
                this.printTable = function () {
                    var tablediv = document.getElementById("datatable");
                    tablediv.innerHTML = "";
                    var data = this.getAll();
                    console.log(data);
                    if (Object.keys(data).length > 0) {
                        for (var i in data) {
                            tablediv.innerHTML += "<tr><td>" + data[i]["username"] + "</td><td>" + data[i]["address"] + "</td><td><a href='javascript:editAddr(" + i + ")'>Edit</a></td><td><a href='javascript:deleteAddr(" + i + ")'>Delete</a></td></tr>";
                        }

                    } else {
                        tablediv.innerHTML = "<tr><td colspan=3></td></tr>";
                    }
                }
                this.updateField = function (id) {
                    var data = this.get(id)
                    if (Object.keys(data).length > 0) {
                        document.getElementById("username").value = data["username"];
                        document.getElementById("address").value = data["address"];
                        document.getElementById("recordnumber").value = id;
                        document.getElementById("submit").setAttribute("data", "update");
                    }
                }
                this.clearField = function () {
                    document.getElementById("username").value = "";
                    document.getElementById("address").value = "";
                    document.getElementById("recordnumber").value = 0;
                    document.getElementById("submit").setAttribute("data", "add");
                }
            }
            classInstance = new formSave();


            function add(ele) {
                var mode = ele.getAttribute("data");
                console.log(mode);
                if (mode == "update") {
                    var id = document.getElementById("recordnumber").value;
                    classInstance.update(id);
                    classInstance.clearField(id);
                } else {
                    classInstance.add();
                }
            }
            function editAddr(id) {
                classInstance.updateField(id);
            }
            function deleteAddr(id) {
                classInstance.delete(id);
            }
        </script>
    </body>

</html>
	<html>
	<body>
	<form method="post">
	<label>Username</label>
	<input name="username" id="username"><br>
	<label>Address</label>
	<textarea name="address" id="address"></textarea><br>
	<input type="hidden" value="0" id="recordnumber">
	<input type="button" id="submit" name="submit" onClick="add(this)" data="add" value="add">
	</form>
	<div id="message"></div>

	<table>
	<thead>
	<tr><th>Username</th><th>Address</th><th></th></tr>
	</thead>
	<tbody id="datatable">

	</tbody>
	</table>
	<script>
	function formSave() {
	this.data = {} \|\| [];
	var getID = function () {
	var date = new Date();
	return date.getTime();
	}

	var getCurrentData = function () {
	var data = {};
	data["username"] = document.getElementById("username").value;
	data["address"] = document.getElementById("address").value;
	return data;
	}

	this.add = function () {
	var data = getCurrentData();
	if (Object.keys(data).length > 0) {
	var id = getID();
	this.data[id] = data;
	this.clearField();
	this.printTable();
	return id;
	}


	}
	this.update = function (id) {
	var data = getCurrentData();
	if (typeof id != "undefined" && Object.keys(data).length > 0) {
	console.log(data);
	this.data[id] = data;
	this.printTable();
	return true;
	}
	}
	this.delete = function (id) {
	if (typeof id != "undefined" && id > 0) {
	delete this.data[id];
	this.printTable();
	}

	}
	this.get = function (id) {
	if (typeof id != "undefined") {
	var data = this.data[id];
	return data;
	}
	return {};
	}
	this.getAll = function () {
	return this.data;
	}
	this.printTable = function () {
	var tablediv = document.getElementById("datatable");
	tablediv.innerHTML = "";
	var data = this.getAll();
	console.log(data);
	if (Object.keys(data).length > 0) {
	for (var i in data) {
	tablediv.innerHTML += "<tr><td>" + data[i]["username"] + "</td><td>" + data[i]["address"] + "</td><td><a href='javascript:editAddr(" + i + ")'>Edit</a></td><td><a href='javascript:deleteAddr(" + i + ")'>Delete</a></td></tr>";
	}

	} else {
	tablediv.innerHTML = "<tr><td colspan=3></td></tr>";
	}
	}
	this.updateField = function (id) {
	var data = this.get(id)
	if (Object.keys(data).length > 0) {
	document.getElementById("username").value = data["username"];
	document.getElementById("address").value = data["address"];
	document.getElementById("recordnumber").value = id;
	document.getElementById("submit").setAttribute("data", "update");
	}
	}
	this.clearField = function () {
	document.getElementById("username").value = "";
	document.getElementById("address").value = "";
	document.getElementById("recordnumber").value = 0;
	document.getElementById("submit").setAttribute("data", "add");
	}
	}
	classInstance = new formSave();


	function add(ele) {
	var mode = ele.getAttribute("data");
	console.log(mode);
	if (mode == "update") {
	var id = document.getElementById("recordnumber").value;
	classInstance.update(id);
	classInstance.clearField(id);
	} else {
	classInstance.add();
	}
	}
	function editAddr(id) {
	classInstance.updateField(id);
	}
	function deleteAddr(id) {
	classInstance.delete(id);
	}
	</script>
	</body>

	</html>