0
<!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 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.