Scribd
Upload
37 views3 pages

Tragsdhsd

The document contains JavaScript functions to handle form submission. The onFormSubmit function calls readFormData to retrieve input values, insertNewRecord to add a new record to a table, and resetForm to clear the form fields. ReadFormData returns the form values. InsertNewRecord adds the data as new rows in a table. ResetForm clears the form field values.

Uploaded by

Luna Moon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
37 views3 pages

Tragsdhsd

The document contains JavaScript functions to handle form submission. The onFormSubmit function calls readFormData to retrieve input values, insertNewRecord to add a new record to a table, and resetForm to clear the form fields. ReadFormData returns the form values. InsertNewRecord adds the data as new rows in a table. ResetForm clears the form field values.

Uploaded by

Luna Moon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

function onFormSubmit() {

// call all the below functions here to use this function in the form while
implementing onsubmit.
var data = readFormData();
insertNewRecord(data);
resetForm();

function readFormData() {
// return all the input values from three input fields here.
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var location = document.getElementById("location").value;
return ({fname, lname, location});
}

function insertNewRecord(data) {
// this function should insert a new row with data in the table.
document.getElementById("tabledata").rows[0].cells[0].innerHTML = data.fname;
document.getElementById("tabledata").rows[0].cells[1].innerHTML = data.lname;
document.getElementById("tabledata").rows[0].cells[2].innerHTML = data.location;

// var table = document.getElementById("tabledata");


// var row = table.insertRow(0);
// var cell1 = row.insertCell(0);
// var cell2 = row.insertCell(1);
// var cell3 = row.insertCell(2);
// cell1.innerHTML = data.fname;
// cell2.innerHTML = data.lname;
// cell3.innerHTML = data.location;
// document.getElementById("tabledata").deleteRow(0);
// var row1= table.insertRow(1);
// var cell1 = row1.insertCell(0);
// var cell2 = row1.insertCell(1);
// var cell3 = row1.insertCell(2);
// cell1.innerHTML = data.fname;
// cell2.innerHTML = data.lname;
// cell3.innerHTML = data.location;
// console.log(data.lname);

}
function resetForm() {
// this function should reset the form fields.
document.getElementById("fname").value = '';
document.getElementById("lname").value = '';
document.getElementById("location").value = '';
}
if (typeof exports !== "undefined") {
module.exports = {
onFormSubmit,
readFormData,
insertNewRecord,
resetForm,
};
}
----------------------------------------
var data = [
{
id: 0,
name: "Janu",
English: 50,
Maths: 86,
Science: 77,
SocialScience: 88
},
{
id: 1,
name: "Thanu",
English: 75,
Maths: 96,
Science: 67,
SocialScience: 91
},
{
id: 2,
name: "Tara",
English: 90,
Maths: 35,
Science: 86,
SocialScience: 100
},
{
id: 3,
name: "Glen",
English: 79,
Maths: 68,
Science: 77,
SocialScience: 78
},
{
id: 4,
name: "Zara",
English: 80,
Maths: 85,
Science: 96,
SocialScience: 68
}
]

function onPageLoad() {
// code goes here to display table on page loads
var table =
document.getElementById("studentTable").getElementsByTagName('tbody')[0];
for(var i = 0; i < data.length; i++){

var row = table.insertRow(i);

// Insert new cells (<td> elements) at the 1st and 2nd position of the "new"
<tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
// Add some text to the new cells:
cell1.innerHTML = data[i].id;
cell2.innerHTML = data[i].name;
cell3.innerHTML = data[i].English;
cell4.innerHTML = data[i].Maths;
cell5.innerHTML = data[i].Science;
cell6.innerHTML = data[i].SocialScience;
}

function filterBy() {
// code goes here to select filter by option

function Clear() {
// code goes here to clear filter
}

function filterClick() {
// code goes here to handle filter button
var x = document.getElementById("mySelect").value;
if(x === 'English'){

}
else if(x === 'Maths'){

}
else if(x === 'Science'){

}
else if(x === 'SocialScience'){

}
}

You might also like