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>
Improve this question

1 Answer 1

Reset to default
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.

Improve this answer

Your Answer

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

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