Page 298 - Web Applications (803) Class 12
P. 298
<form id=”userForm”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name” required><br><br>
<label>Gender:</label>
<input type=”radio” id=”male” name=”gender” value=”male”>
<label for=”male”>Male</label>
<input type=”radio” id=”female” name=”gender” value=”female”>
<label for=”female”>Female</label>
<input type=”radio” id=”other” name=”gender” value=”other”>
<label for=”other”>Other</label><br><br>
<label for=”address”>Address:</label>
<textarea id=”address” name=”address”></textarea><br><br>
<label for=”mobile”>Mobile Number:</label>
<input type=”tel” id=”mobile” name=”mobile”><br><br>
<button type=”submit”>Submit</button>
</form>
<div id=”greeting”></div>
<script src=”Pscript.js”></script>
</body>
</html>
File 2: Pscript.js
const userForm = document.getElementById(“userForm”);
const greeting = document.getElementById(“greeting”);
userForm.addEventListener(“submit”, function (event) {
event.preventDefault(); // Prevent the form from submitting and refreshing
the page
const name = document.getElementById(“name”).value;
const gender = document.querySelector(‘input[name=”gender”]:checked’);
const address = document.getElementById(“address”).value;
const mobile = document.getElementById(“mobile”).value;
if (name) {
let greetingMessage = `Hello, ${name}! Welcome to the Interactive
Form.`;
if (gender) {
greetingMessage += ` Your gender is ${gender.value}.`;
}
if (address) {
greetingMessage += ` Your address is ${address}.`;
}
296 Touchpad Web Applications-XII

