Everything is working fine but in the last line my id is not displaying. It's displaying like %id% not the actual data.
PROBLEMS
- I want to start the id from 1 but it's starting from 0. I can't understand how to make it start from 1.
- Id is not displaying by insertAdjacentHTML. It's in the last line in the js code.
//Constructor for student form
var studentForm = function(iD, name, city, college, course, age) {
this.id = iD;
this.name = name;
this.city = city;
this.college = college;
this.course = course;
this.age = age;
}
//all data store here as object
var data = [];
//function to submit and display form
var submitForm = function() {
//getInput data from the field
var getInput = {
name: document.querySelector('.name').value,
city: document.querySelector('.city').value,
college: document.querySelector('.college').value,
course: document.querySelector('.course').value,
age: document.querySelector('.age').value,
}
//store the data which you get previous to use that
var input = getInput;
//Create a new id
var ID;
if (data.length > 0) {
ID = data[data.length - 1].id + 1;
} else {
ID = 0;
}
//Use the constructor and make a new data
var newForm = new studentForm(ID, input.name, input.city, input.college, input.course, input.age);
//Add the student data into the ds
data.push(newForm);
//Display the data in the Document
//html line to display data of object
var html = '<tr><td class="id-%id%">%id%</td><td class="tname">%name%</td><td class="tcity">%city%</td><td class="tcollege">%college%</td><td class="tcourse">%course%</td><td class="tage">%age%</td></tr>';
//Replace the placeHOlder With actual data
var newHtml = html;
newHtml = newHtml.replace('%id%', ID);
newHtml = newHtml.replace('%name%', input.name);
newHtml = newHtml.replace('%city%', input.city);
newHtml = newHtml.replace('%college%', input.college);
newHtml = newHtml.replace('%course%', input.course);
newHtml = newHtml.replace('%age%', input.age);
//Get the element which after you wants to print the data
document.querySelector('.table-heading').insertAdjacentHTML('afterend', newHtml);
console.log(newForm);
return newForm;
}
document.querySelector('.btn').addEventListener('click', submitForm);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<input type="text" placeholder="name" class="name">
<input type="text" placeholder="city" class="city">
<input type="text" placeholder="college" class="college">
<input type="text" placeholder="Course" class="course">
<input type="number" placeholder="age" class="age">
<input type="button" class="btn" value="submit">
<div class="table">
<table class="tablemain">
<tr class="table-heading">
<th>ID</th>
<th>Name</th>
<th>City</th>
<th>College</th>
<th>Course</th>
<th>Age</th>
</tr>
</table>
</div>
.replace() function will only replace the first occurrence, so to make this example work just remove %id% from class attribute.
Demo: Jsfiddle