WebX Exp 9
WebX Exp 9
9: AJAX
D.O.P. 06/03/2025
D.O.S. 13/03/2025
PROBLEM STATEMENT :
Create a registration page having fields like Name, College, Username, and Password
(password is to be entered twice).
Validate the form by checking:
THEORY :
Waits for the server response Continues executing while waiting for response
Slower user experience Faster, smoother user experience
Methods:
CODE:
a) Folder Structure
b) index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Registration</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Register</h1>
<form id="registerForm">
<input type="text" id="name" placeholder="Name"
required />
<input type="text" id="college" placeholder="College"
list="collegeList" required />
<datalist id="collegeList"></datalist>
<input type="text" id="username"
placeholder="Username" required />
<input type="password" id="password"
placeholder="Password" required />
<input type="password" id="confirmPassword"
placeholder="Confirm Password" required />
<button type="submit">Register</button>
</form>
<div id="message"></div>
<button id="addNewBtn" style="display:none;">Add
New</button>
</div>
<script src="script.js"></script>
</body>
</html>
c) script.js
document.getElementById('registerForm').addEventListener('s
ubmit', function (e) {
e.preventDefault();
const name =
document.getElementById('name').value.trim();
const college =
document.getElementById('college').value.trim();
const username =
document.getElementById('username').value.trim();
const password =
document.getElementById('password').value;
const confirmPassword =
document.getElementById('confirmPassword').value;
const messageBox = document.getElementById('message');
const addNewBtn = document.getElementById('addNewBtn');
messageBox.innerText = '';
messageBox.style.color = 'red';
addNewBtn.style.display = 'none';
if (!name) {
messageBox.innerText = 'Name cannot be empty!';
return;
}
if (userExists) {
messageBox.innerText = 'Username already exists!';
} else {
const newUser = {
name,
college,
username,
password
};
// Auto-suggest colleges
const collegeNames = ["VESIT", "DJ Sanghvi", "Sardar
Patel", "KJ Somaiya", "VJTI"];
const datalist = document.getElementById("collegeList");
collegeNames.forEach(name => {
const option = document.createElement("option");
option.value = name;
datalist.appendChild(option);
});
d) users.json
{
"users": []
}
OUTPUT:
a) Registration Form Display
This screenshot displays the registration form with input fields for Name, College,
Username, Password, and Confirm Password, ensuring that the Name field is not
left empty.
b) Successful Registration Message
This screenshot confirms that the Password and Re-typed Password match,
ensuring data integrity.