I have a HTML page with a form and a table.
In a js
file I have a list of objects (JSON) and with this list I populate the table when the page loads.
The form should allow me to add an element to the list and then display it as a new row in the table.
This is my js file:
var data = [
{
"first_name": "John",
"last_name": "Smith",
"email": "[email protected]",
"job": "CEO",
"agree": true
},
{
"first_name": "Marie",
"last_name": "Curie",
"email": "[email protected]",
"job": "Researcher",
"agree": true
}];
populateTable();
function populateTable() {
var out = "<table><tr>"
+ "<th>First Name</th><th>Last Name</th>"
+ "<th>Email</th>"
+ "<th>Job</th><th>Agree</th></tr>";
var i;
for (i = 0; i < data.length; i++) {
out += '<tr><td>' + data[i].first_name + '</td><td>' + data[i].last_name + '</td><td>'
+ data[i].email + '</td><td>' + data[i].job + '</td><td>' + data[i].agree + '</td></tr>';
}
document.getElementById("showData").innerHTML = out;
};
function collectData(){
var TestName = document.getElementById("fname").value;
var TestSurname = document.getElementById("lname").value;
var TestEmail = document.getElementById("email").value;
var TestJob = document.getElementById("job").value;
var TestAgree = document.getElementById("agree_terms").value;
//insert this data on JSON file
var jsonObject = {
"first_name": TestName,
"last_name": TestSurname,
"email": TestEmail,
"job": TestJob,
"agree": TestAgree
};
data.push(jsonObject);
}
I tried to push the new element on the list but naturally the code reload the function populateTable() without considering this new element.
Ho can I resolve it?