<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>employee_good</title>
<style>
div {
display: inline-table;
width: 49%;
}
</style>
</head>
<script>
function loadData() {
loadEmployee();
loadGender();
}
function loadEmployee() {
var http = new XMLHttpRequest();
http.onreadystatechange = function () {
//console.log(this.readyState);
if (this.readyState == 4 && this.status == 200) {
var jsonData = this.responseText;
showTable(jsonData);
}
}
http.open("GET", "../server/employee.php", true);
http.send();
}
function loadGender() {
var http = new XMLHttpRequest();
http.onreadystatechange = function () {
//console.log(this.readyState);
if (this.readyState == 4 && this.status == 200) {
var jsonData = this.responseText;
showGender(jsonData);
}
}
http.open("GET", "../server/gender.php", true);
http.send();
}
function showGender(jsonData) {
var genders = JSON.parse(jsonData);
for (let i = 0; i < genders.length; i++) {
const gender = genders[i];
var txtOption = document.createElement("option");
txtOption.innerHTML = gender['name'];
txtOption.value = gender['id'];
cmbGender.appendChild(txtOption);
}
}
function showTable(jsonData) {
display.innerHTML = "";
var employees = JSON.parse(jsonData);
for (let i = 0; i < employees.length; i++) {
const employee = employees[i];
var tr = document.createElement("tr");
var tdId = document.createElement("td");
tdId.innerHTML = employee['id'];
tr.appendChild(tdId);
var tdName = document.createElement("td");
tdName.innerHTML = employee['name'];
tr.appendChild(tdName);
var tdAge = document.createElement("td");
tdAge.innerHTML = employee['age'];
tr.appendChild(tdAge);
var tdGender = document.createElement("td");
tdGender.innerHTML = employee['gender'];
tr.appendChild(tdGender);
var tdDelete = document.createElement("td");
var btnDelete = document.createElement("input");
btnDelete.value = "Delete";
btnDelete.type = "button";
btnDelete.addEventListener("click", function () {
deleteEmployee(employee['id']);
})
tdDelete.appendChild(btnDelete);
tr.appendChild(tdDelete);
display.appendChild(tr);
}
}
function deleteEmployee(id) {
window.alert(id);
//write delete function
}
function addEmployee() {
var name = txtName.value;
var age = txtAge.value;
var gender = cmbGender.value;
var http = new XMLHttpRequest();
http.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
if (this.responseText === "true") {
loadEmployee();
}
}
}
http.open("POST", "../server/insert.php", true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.send("txtName=" + name + "&txtAge=" + age + "&txtGender=" + gender);
}
</script>
<body onload="loadData()">
<div>
<h1>Add Employee</h1>
<form>
Enter Name:
<input type="text" id="txtName">
<br><br>
Enter Age:
<input type="text" id="txtAge">
<br><br>
Select Gender:
<select id="cmbGender">
</select>
<br><br>
<input type="button" value="Clear">
<input type="button" value="Submit" onclick="addEmployee()">
</form>
</div>
<div>
<h1>Employee Table</h1>
<table border="1" cellspacing="0" cellpadding="5">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th></th>
</tr>
</thead>
<tbody id="display">
</tbody>
</table>
</div>
</body>
</html>
1 Answer
You can reset the form inputs after the XHR is completed. The following would be one way of doing it.
function addEmployee() {
var name = txtName.value;
var age = txtAge.value;
var gender = cmbGender.value;
var http = new XMLHttpRequest();
http.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
if (this.responseText === "true") {
loadEmployee();
resetForm();
}
}
}
http.open("POST", "../server/insert.php", true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.send("txtName=" + name + "&txtAge=" + age + "&txtGender=" + gender);
}
function resetForm() {
var inputs = document.querySelectorAll('#txtName, #txtAge'), select = document.getElementById('cmbGender');
inputs.forEach(input => {
input.value = '';
});
select.innerHTML = '';
}
Hope that helped.