Details Collector Form Using HTML CSS and JavaScript
In This Article we Simply learn How Get Forms Value on Submit Using JavaScript, and Show the User Enter Data in the Same Page. To Make Form I Have Taken DIV Tag with ID Container. And the The Input method are Within this DIV Tag.
I Have Used JavaScript to Fetch the Value Of Name, Class, Roll, and Address Enter by User and Stored it in Variable name, Class, roll and Address.
After That I have Fetch the Table Id And Stored in Var display and Show the User Entered Value in the Table. JavaScript get all form values on submit
You Will get you Data On the Same Page in the Formatted Table
Concept Learn
EventListener
DOM Manupulation
HTML CODE
<!-- www.codingsoln.xyz -->
<!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>Details Collector</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h3>Details Collector</h3>
<lable for="name">Name</lable><br>
<input type="text" value=" " id="dName"><br>
<label for="roll">Roll</label><br>
<input type="text" value="" id="dRoll"><br>
<lable for="address">Class</lable><br>
<input type="text" value="" id="dClass"><br>
<lable for="address">Address</lable><br>
<input type="text" value="" id="dAddress"><br>
<br>
<button id="entry">Submit</button>
</div>
<table id="display">
<tr>
<th>Name</th>
<th>Roll</th>
<th>Class</th>
<th>Address</th>
</tr>
</table>
<script src="app.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h3{
text-align: center;
color: red;
}
#container{
width:50%;
height: 59vh;
margin:50px auto;
padding: 8px;
font-size: 20px;
border: 1px solid rgb(230, 221, 221);
border-radius: 10px;
background-color: #ccc;
align-items: center;
justify-content: center;
}
input[type=text], select, textarea {
width: 90%;
margin: 4px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
button{
width: 90px;
border: 1px solid rgb(55, 0, 255);
padding: 8px;
border-radius: 4px;
background-color: rgb(17, 0, 255);
color:rgb(255, 255, 255);
font-size: 15px;
cursor: pointer;
font-weight: bold;
}
table{
border-collapse: collapse;
width: 50%;
margin: 50px auto;
background-color: chocolate;
}
table, th, td{
border: 2px solid black;
padding: 5px;
}
th{
font-size: 20px;
font-weight: bold;
color: darkblue;
}
td{
font-size: 15px;
color: black;
}
var entry = document.getElementById('entry');
entry.addEventListener('click', displayDetails);
var row = 1;
function displayDetails() {
var name = document.getElementById('dName').value;
var roll = document.getElementById('dRoll').value;
var address = document.getElementById('dAddress').value;
var Class = document.getElementById('dClass').value;
var display = document.getElementById('display');
var newRow = display.insertRow(row);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
cell1.innerHTML = name;
cell2.innerHTML = roll;
cell3.innerHTML = Class;
cell4.innerHTML = address;
row++;
}
Tags:
html