Scribd
Upload
1 views

Program No2 (1)

The document provides source code for developing dynamic web content using JavaScript, including a registration form with validation, a processor page to display submitted data, and examples of event handling. It includes HTML, CSS, and JavaScript to create forms that validate user input and respond to events like button clicks. The code demonstrates how to handle form submissions and display dynamic content based on user interactions.

Uploaded by

meghana31p
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views

Program No2 (1)

The document provides source code for developing dynamic web content using JavaScript, including a registration form with validation, a processor page to display submitted data, and examples of event handling. It includes HTML, CSS, and JavaScript to create forms that validate user input and respond to events like button clicks. The code demonstrates how to handle form submissions and display dynamic content based on user interactions.

Uploaded by

meghana31p
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Program no:2 Dynamic Website Development

Aim: 2. (a) Develop Dynamic web content using javascript.


Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
} .main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 300px;
} .main h2 {
color: #4caf50;
margin-bottom: 20px;
} label {
display: block;
margin-bottom: 5px;
color: #555;
font-weight: bold;
} input[type="text"],
input[type="email"],
input[type="password"],
select {
width: 100%;
margin-bottom: 15px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 5px;
} button[type="submit"] {
padding: 15px;
border-radius: 10px;
border: none;
background-color: #4caf50;
color: white;
cursor: pointer;
width: 100%;
font-size: 16px;
} </style>
</head>
<body>
<div class="main">
<h2>Registration Form</h2>
<form action="">
<label for="first">First Name:</label>
<input type="text" id="first" name="first" required />
<label for="last">Last Name:</label>
<input type="text" id="last" name="last" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="password">Password:</label>
<input type="password" id="password" name="password"
pattern="^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])\S{8,}$"
title="Password must contain at least one number,
one alphabet, one symbol, and be at
least 8 characters long" required />
<label for="repassword">Re-type Password:</label>
<input type="password" id="repassword" name="repassword" required />
<label for="mobile">Contact:</label>
<input type="text" id="mobile" name="mobile" maxlength="10" required />
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="male">
Male
</option>
<option value="female">
Female
</option>
<option value="other"> Other </option>
</select> <button type="submit"> Submit </button>
</form> </div>
</body>
</html>
Aim: 2.(b) Develop a student registration form with validation support using javascript.
Source code: Registration.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Form Validation in JS</title>
<style> .error {
color: red;
}
.valid {
color: green;
}
</style>
</head>
<body>
<form action="processor.html" method="get" id="frmstudentregistration"
name="frmregistration" onsubmit="return validate()" onreset="resetForm()">

<!-- Student Name -->


<label for="txtstudentname">Student name:</label><br/>
<input type="text" placeholder="Enter your name" id="txtstudentname"
name="txtstudentname"/>
<span id="spnISstudentnamevalid"></span><br/><br/>

<!-- Password -->


<label for="txtpassword">Password:</label><br/>
<input type="password" placeholder="Enter your password" id="txtpassword"
name="txtpassword"/>
<span id="spnISpasswordvalid"></span><br/><br/>
<!-- Email -->
<label for="txtemail">Email:</label><br/>
<input type="email" placeholder="Enter your email" id="txtemail" name="txtemail"/>
<span id="spnISemailvalid"></span><br/><br/>

<!-- Gender -->


<label>Gender:</label><br/>
<input type="radio" id="genderMale" name="gender" value="Male"> Male
<input type="radio" id="genderFemale" name="gender" value="Female"> Female
<input type="radio" id="genderOther" name="gender" value="Other"> Other
<span id="spnISgendervalid"></span><br/><br/>
<!-- Submit and Reset Buttons -->
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<script type="text/javascript">
function validate() {
var isFormValid = true;
// Validate Student Name
var studentName = document.getElementById("txtstudentname").value;
if (studentName == "") {
isFormValid = false;
document.getElementById("spnISstudentnamevalid").innerHTML = "Please enter your
name.";
document.getElementById("spnISstudentnamevalid").className = "error";
} else {
document.getElementById("spnISstudentnamevalid").innerHTML = "Valid";
document.getElementById("spnISstudentnamevalid").className = "valid";
}
// Validate Password
var password = document.getElementById("txtpassword").value;
if (password.length < 6) {
isFormValid = false;
document.getElementById("spnISpasswordvalid").innerHTML = "Password must be at
least 6 characters.";
document.getElementById("spnISpasswordvalid").className = "error";
} else {
document.getElementById("spnISpasswordvalid").innerHTML = "Valid";
document.getElementById("spnISpasswordvalid").className = "valid";
}
// Validate Email
var email = document.getElementById("txtemail").value;
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email)) {
isFormValid = false;
document.getElementById("spnISemailvalid").innerHTML = "Please enter a valid
email.";
document.getElementById("spnISemailvalid").className = "error";
} else {
document.getElementById("spnISemailvalid").innerHTML = "Valid";
document.getElementById("spnISemailvalid").className = "valid";
}
// Validate Gender
var genderMale = document.getElementById("genderMale").checked;
var genderFemale = document.getElementById("genderFemale").checked;
var genderOther = document.getElementById("genderOther").checked;
if (!genderMale && !genderFemale && !genderOther) {
isFormValid = false;
document.getElementById("spnISgendervalid").innerHTML = "Please select a
gender.";
document.getElementById("spnISgendervalid").className = "error";
} else {
document.getElementById("spnISgendervalid").innerHTML = "Valid";
document.getElementById("spnISgendervalid").className = "valid";
} return isFormValid;
} function resetForm() {
document.getElementById("spnISstudentnamevalid").innerHTML = "";
document.getElementById("spnISpasswordvalid").innerHTML = "";
document.getElementById("spnISemailvalid").innerHTML = "";
document.getElementById("spnISgendervalid").innerHTML = "";
} </script>
</body></html>

Processor.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Processor Page</title>
</head>
<body>
<h2>Form Data Received:</h2>
<script type="text/javascript">
// Get query string from the URL
var queryString = window.location.search;

// Parse the query string parameters


var queryStringParams = new URLSearchParams(queryString);

// Get individual form data from the query string


var studentName = queryStringParams.get("txtstudentname");
var password = queryStringParams.get("txtpassword"); // Avoid showing passwords in
production
var email = queryStringParams.get("txtemail");
var gender = queryStringParams.get("gender");

// Display the form data on the page


document.write("<p>Student name: " + studentName + "</p>");
document.write("<p>Password: " + password + "</p>"); // This should be avoided or
masked in real applications
document.write("<p>Email: " + email + "</p>");
document.write("<p>Gender: " + gender + "</p>");
</script></body></html>
Aim: 2.(c) Develop a Dynamic website using Event Handling.
Source code for display Event Date:
<html>
<body>
<script> function display()
{
var x="You have clicked";
var d=new Date();
var date=d.getDate();
var month=d.getMonth();
month++;
var year=d.getFullYear();

document.getElementById("dis").value=date+"
/"+month+"/"+year;
}

</script>
<form> <input type="text" id="dis" />
<br />
<input type="button" value="Display Date"
onclick="display()" />
</form>
</body>
</html>
Source code for Event Click:

<!doctype html>
<html>

<head>
<script>
function hiThere() {
alert('Hi there!');
}
</script>
</head>

<body>
<button type="button"
onclick="hiThere()"
style="margin-left: 50%;">
Click me event
</button>
</body>

You might also like