<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Information Form</title>
<script>
// Create an empty array to hold form entries
const userData = [];
function saveData() {
// Collect form data
const firstName = document.getElementById('firstName').value;
const middleName = document.getElementById('middleName').value;
const lastName = document.getElementById('lastName').value;
const gradeLevel = document.getElementById('gradeLevel').value;
const homeroomTeacher = document.getElementById('homeroomTeacher').value;
// Combine values into an object
const user = {
firstName: firstName,
middleName: middleName,
lastName: lastName,
gradeLevel: gradeLevel,
homeroomTeacher: homeroomTeacher
};
// Push the object into the array
userData.push(user);
// Display the updated array on the page
document.getElementById('output').innerText = JSON.stringify(userData, null, 2);
// Alert to confirm saving
alert('Data saved!');
}
</script>
</head>
<body>
<h1>User Information Form</h1>
<form onsubmit="event.preventDefault()">
<label for="firstName">First Name:</label><br>
<input type="text" id="firstName" name="firstName" required><br><br>
<label for="middleName">Middle Name:</label><br>
<input type="text" id="middleName" name="middleName"><br><br>
<label for="lastName">Last Name:</label><br>
<input type="text" id="lastName" name="lastName" required><br><br>
<label for="gradeLevel">Grade Level:</label><br>
<input type="text" id="gradeLevel" name="gradeLevel" required><br><br>
<label for="homeroomTeacher">Homeroom Teacher:</label><br>
<input type="text" id="homeroomTeacher" name="homeroomTeacher" required><br><br>
<!-- Use onclick to trigger the function -->
<button type="button" onclick="saveData()">Submit</button>
</form>
<h2>Submitted Data:</h2>
<pre id="output"></pre>
</body>
</html>
/* Add your styles here */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Information Form</title>
<script>
// Create an empty array to hold form entries
const userData = [];
function saveData() {
// Collect form data
const firstName = document.getElementById('firstName').value;
const middleName = document.getElementById('middleName').value;
const lastName = document.getElementById('lastName').value;
const gradeLevel = document.getElementById('gradeLevel').value;
const homeroomTeacher = document.getElementById('homeroomTeacher').value;
// Combine values into an object
const user = {
firstName: firstName,
middleName: middleName,
lastName: lastName,
gradeLevel: gradeLevel,
homeroomTeacher: homeroomTeacher
};
// Push the object into the array
userData.push(user);
// Display the updated array on the page
document.getElementById('output').innerText = JSON.stringify(userData, null, 2);
// Alert to confirm saving
alert('Data saved!');
}
</script>
</head>
<body>
<h1>User Information Form</h1>
<form onsubmit="event.preventDefault()">
<label for="firstName">First Name:</label><br>
<input type="text" id="firstName" name="firstName" required><br><br>
<label for="middleName">Middle Name:</label><br>
<input type="text" id="middleName" name="middleName"><br><br>
<label for="lastName">Last Name:</label><br>
<input type="text" id="lastName" name="lastName" required><br><br>
<label for="gradeLevel">Grade Level:</label><br>
<input type="text" id="gradeLevel" name="gradeLevel" required><br><br>
<label for="homeroomTeacher">Homeroom Teacher:</label><br>
<input type="text" id="homeroomTeacher" name="homeroomTeacher" required><br><br>
<!-- Use onclick to trigger the function -->
<button type="button" onclick="saveData()">Submit</button>
</form>
<h2>Submitted Data:</h2>
<pre id="output"></pre>
</body>
</html>