CODEWITHSUNDEEP
javascript
Kp Kumar
Kp Kumar

Reputation: 125

Unable to clear the form after submitting

I tried a project which has a form to submit the employee expenses. I got everything working but unable to clear the form (entered details in the text fields) after clicking on submit.

Getting Error: (After entering the details and clicking the submit button)

Uncaught ReferenceError: d is not defined at HTMLInputElement.onclick (index.html:63:42)

Here is my code:

document.getElementById("submit").addEventListener("click", (e) => {
    e.preventDefault();

    // Form validation
    function validate() {
        if (document.myForm.empId.value == "") {
            alert("Please provide your Employee ID!");
            document.myForm.empId.focus();
            return false;
        }
        if (document.myForm.empName.value == "") {
            alert("Please provide your Name!");
            document.myForm.empName.focus();
            return false;
        }
        if (document.myForm.PaymentMode.value == "") {
            alert("Select your Payment Mode!");
            document.myForm.PaymentMode.focus();
            return false;
        }

        if (document.myForm.Date.value == "") {
            alert("Please provide the Date!");
            document.myForm.Date.focus();
            return false;
        }
        if (document.myForm.Bill.value == "") {
            alert("Please provide your Bill Amount!");
            document.myForm.Bill.focus();
            return false;
        }
        return true;
    }
    let id = document.getElementById("id").innerText;
    let empId = document.getElementById("empID").value;
    let name = document.getElementById("name").innerText;
    let empName = document.getElementById("empname").value;
    let using = document.getElementById("using").innerText;
    let mode = document.getElementById("payment-mode").value;
    let day = document.getElementById("day").innerText;
    let date = document.getElementById("date").value;
    let amount = document.getElementById("amount").innerText;
    let bill = document.getElementById("bill").value;
    let form = document.getElementById("forReset");
    let array = [
        [id, empId],
        [name, empName],
        [using, mode],
        [day, date],
        [amount, bill],
    ];
    let expenseList = Object.fromEntries(array);
    const expenseTable = document.getElementById("expenseTable");

    function output() {
        if (validate()) {
            for (let i = 0; i < Object.keys(expenseList).length; i++) {
                expenseTable.innerHTML += `
            <tr>
                <td>${expenseList[id]}</td>
                <td>${expenseList[name]}</td>
                <td>${expenseList[using]}</td>
                <td>${expenseList[day]}</td>
                <td>$${expenseList[amount]}</td>
                <td><a class="deleteButton">Delete</td>
            </tr>
        `;
                for (let i = 0; i < expenseTable.children.length; i++) {
                    expenseTable.children[i]
                        .querySelector(".deleteButton")
                        .addEventListener("click", function () {
                            this.parentNode.parentNode.remove();
                        });
                }

                break;
            }
        } else {
            return false;
        }
    }

    output();

    function d() {
        form.reset();
    }
    d();
});
.table {
    border: 1px solid black;
    width: 100%;
}

th {
    border-right: 1px solid black;
}

.table td {
    border: 1px solid black;
    text-align: center;
}

.deleteButton {
    cursor: pointer;
}
<!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>Expense Tracker Project</title>
        <link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
        <div class="employee-info">
            <form
                id="forReset"
                class="expenesesForm"
                name="myForm"
                onsubmit="return(validate());"
                method="POST"
                action=""
            >
                <table>
                    <tr>
                        <td id="id">Employee ID:</td>
                        <td>
                            <input id="empID" name="empId" type="text" placeholder="Employee ID" />
                        </td>
                    </tr>
                    <tr>
                        <td id="name">Name:</td>
                        <td>
                            <input id="empname" type="text" placeholder="Name" name="empName" />
                        </td>
                    </tr>
                    <tr>
                        <td id="using">Payment Mode:</td>
                        <td>
                            <select id="payment-mode" name="PaymentMode">
                                <option class="" value="" selected disabled>
                                    Select from the list
                                </option>
                                <option class="mode" value="card">Card</option>
                                <option class="mode" value="cheque">Cheque</option>
                                <option class="mode" value="cash">Cash</option>
                                <option class="mode" value="other">Other</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td id="day">Date of Transaction:</td>
                        <td><input id="date" type="date" name="Date" /></td>
                    </tr>
                    <tr>
                        <td id="amount">Amount:</td>
                        <td><input id="bill" type="number" name="Bill" /></td>
                    </tr>
                    <tr>
                        <td>
                            <br />
                            <input
                                id="submit"
                                type="submit"
                                value="Submit"
                                onclick="javascript:d();"
                            />
                            <input id="reset" type="reset" value="Cancel" />
                        </td>
                    </tr>
                </table>
            </form>
            <br />
            <table class="table">
                <thead>
                    <tr>
                        <th>Employee Id</th>
                        <th>Name</th>
                        <th>Mode of Transaction</th>
                        <th>Date of Transaction</th>
                        <th>Amount</th>
                    </tr>
                </thead>
                <tbody id="expenseTable"></tbody>
            </table>
        </div>
        <script src="./script.js"></script>
    </body>
</html>

Expected output: After clicking the submit button, entered form details should get cleared.

Upvotes: 0

Views: 119

Answers (1)

Sojin Antony
Sojin Antony

Reputation: 2217

Here is a simple method, click reset button automatically after submit

You could reuse the <input type="reset"> cancel icon to clear form values https://www.w3schools.com/tags/att_input_type_reset.asp

Also, you can hide reset input using display:none, if it is not necessary in your screen

An alternative method is clear each input value by setting an empty value in it

 function formReset () {
    document.getElementById("empID").value = '';
    document.getElementById("name").innerText = '';
    document.getElementById("empname").value = '';
  }

Here is a working example

document.getElementById("submit").addEventListener("click", (e) => {
    e.preventDefault();

    // Form validation
    function validate() {
        if (document.myForm.empId.value == "") {
            alert("Please provide your Employee ID!");
            document.myForm.empId.focus();
            return false;
        }
        if (document.myForm.empName.value == "") {
            alert("Please provide your Name!");
            document.myForm.empName.focus();
            return false;
        }
        if (document.myForm.PaymentMode.value == "") {
            alert("Select your Payment Mode!");
            document.myForm.PaymentMode.focus();
            return false;
        }

        if (document.myForm.Date.value == "") {
            alert("Please provide the Date!");
            document.myForm.Date.focus();
            return false;
        }
        if (document.myForm.Bill.value == "") {
            alert("Please provide your Bill Amount!");
            document.myForm.Bill.focus();
            return false;
        }
        return true;
    }
    let id = document.getElementById("id").innerText;
    let empId = document.getElementById("empID").value;
    let name = document.getElementById("name").innerText;
    let empName = document.getElementById("empname").value;
    let using = document.getElementById("using").innerText;
    let mode = document.getElementById("payment-mode").value;
    let day = document.getElementById("day").innerText;
    let date = document.getElementById("date").value;
    let amount = document.getElementById("amount").innerText;
    let bill = document.getElementById("bill").value;
    
    let array = [
        [id, empId],
        [name, empName],
        [using, mode],
        [day, date],
        [amount, bill],
    ];
    let expenseList = Object.fromEntries(array);
    const expenseTable = document.getElementById("expenseTable");

    function output() {
        if (validate()) {
            for (let i = 0; i < Object.keys(expenseList).length; i++) {
                expenseTable.innerHTML += `
            <tr>
                <td>${expenseList[id]}</td>
                <td>${expenseList[name]}</td>
                <td>${expenseList[using]}</td>
                <td>${expenseList[day]}</td>
                <td>$${expenseList[amount]}</td>
                <td><a class="deleteButton">Delete</td>
            </tr>
        `;
                for (let i = 0; i < expenseTable.children.length; i++) {
                    expenseTable.children[i]
                        .querySelector(".deleteButton")
                        .addEventListener("click", function () {
                            this.parentNode.parentNode.remove();
                        });
                }

                break;
            }
        } else {
            return false;
        }
    }

    output();
    function clearData() {
       document.getElementById("reset").click();
    }
    clearData();
  
});
.table {
    border: 1px solid black;
    width: 100%;
}

th {
    border-right: 1px solid black;
}

.table td {
    border: 1px solid black;
    text-align: center;
}

.deleteButton {
    cursor: pointer;
}
<!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>Expense Tracker Project</title>
        <link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
        <div class="employee-info">
            <form
                id="forReset"
                class="expenesesForm"
                name="myForm"
                onsubmit="return(validate());"
                method="POST"
                action=""
            >
                <table>
                    <tr>
                        <td id="id">Employee ID:</td>
                        <td>
                            <input id="empID" name="empId" type="text" placeholder="Employee ID" />
                        </td>
                    </tr>
                    <tr>
                        <td id="name">Name:</td>
                        <td>
                            <input id="empname" type="text" placeholder="Name" name="empName" />
                        </td>
                    </tr>
                    <tr>
                        <td id="using">Payment Mode:</td>
                        <td>
                            <select id="payment-mode" name="PaymentMode">
                                <option class="" value="" selected disabled>
                                    Select from the list
                                </option>
                                <option class="mode" value="card">Card</option>
                                <option class="mode" value="cheque">Cheque</option>
                                <option class="mode" value="cash">Cash</option>
                                <option class="mode" value="other">Other</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td id="day">Date of Transaction:</td>
                        <td><input id="date" type="date" name="Date" /></td>
                    </tr>
                    <tr>
                        <td id="amount">Amount:</td>
                        <td><input id="bill" type="number" name="Bill" /></td>
                    </tr>
                    <tr>
                        <td>
                            <br />
                            <input
                                id="submit"
                                type="submit"
                                value="Submit"
                            />
                            <input id="reset" type="reset" value="Cancel" />
                        </td>
                    </tr>
                </table>
            </form>
            <br />
            <table class="table">
                <thead>
                    <tr>
                        <th>Employee Id</th>
                        <th>Name</th>
                        <th>Mode of Transaction</th>
                        <th>Date of Transaction</th>
                        <th>Amount</th>
                    </tr>
                </thead>
                <tbody id="expenseTable"></tbody>
            </table>
        </div>
        <script src="./script.js"></script>
    </body>
</html>

Upvotes: 1

Related Questions