插入表单的数据在表单提交时消失

Question

I'm trying to insert data through the following JavaScript code. The data inserted, however, disappears from the table when I click Submit .

Here's my code:

 let myform = document.querySelector("form"); let myFN = document.getElementById("fname"); let myLN = document.getElementById("lname"); let MyPar = document.querySelector("p"); let submit = document.getElementById("submit"); myform.addEventListener("submit", (e) => { if (myFN.value === "" || myLN.value === "") { e.preventDefault(); MyPar.textContent = 'you need to fill all'; } }); myform.addEventListener("submit", function() { document.getElementById("table").style.display = "block"; // trigger the table form page let table = document.getElementById("table"); let row = table.insertRow(-1); let fname1 = row.insertCell(0); let lname1 = row.insertCell(1); fname1.innerHTML = document.getElementById("fname").value; lname1.innerHTML = document.getElementById("lname").value; });

 table { display: none; } table, td { border: 1px solid black; }

 <form> <div> <label for="fname">First name: </label> <input id="fname" type="text" /> </div> <div> <label for="lname">Last name: </label> <input id="lname" type="text" /> </div> <div> <input id="submit" type="submit" /> </div> </form> <p></p> <table id="table"> <tr> <th>FirstName</th> <th>LastName</th> </tr> </table>

Answer 1

First, you should remove the event listener that checks whether or not the input fields are blank. You instead can use required for the input tags in the HTML because it has a built-in form validation .

Then, all you need to do is remove the if statement around the e.preventDefault() so it is executed every time the button is clicked.

 let myform = document.querySelector("form"); let myFN = document.getElementById("fname"); let myLN = document.getElementById("lname"); let MyPar = document.querySelector("p"); let submit = document.getElementById("submit"); myform.addEventListener("submit", (e) => { e.preventDefault(); }); myform.addEventListener("submit", function() { document.getElementById("table").style.display = "block"; // trigger the table form page let table = document.getElementById("table"); let row = table.insertRow(-1); let fname1 = row.insertCell(0); let lname1 = row.insertCell(1); fname1.innerHTML = document.getElementById("fname").value; lname1.innerHTML = document.getElementById("lname").value; });

 table { display: none; } table, td { border: 1px solid black; }

 <form> <div> <label for="fname">First name: </label> <input id="fname" type="text" required /> </div> <div> <label for="lname">Last name: </label> <input id="lname" type="text" required /> </div> <div> <button id="submit">Submit</button> </div> </form> <table id="table"> <tr> <th>FirstName</th> <th>LastName</th> </tr> </table>