Assignment 3 in JS
Rohit143
html
4 years ago
6.8 kB
40
Indexable
<!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>Assignment 3</title>
<style>
*{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
form{
background-color: whitesmoke;
}
td {
text-align: right;
}
#radio_btn,#checkbox_btn,#location_list{
text-align: left;
}
#btn{
text-align: center;
}
button{
background-color: cornflowerblue;
color: white;
border: none;
outline: none;
padding: 7px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1 align="center"> COVID 19 Survey</h1>
<form action="" method="post" name="feedback" onsubmit="return validate()" autocomplete="True">
<table align="center" cellspacing=15>
<tr>
<td>Name
<td><input type="text" name="Name" placeholder="Enter your name" ></td>
</tr>
<tr>
<td>Email
<td><input type="email" name="Email" placeholder="Enter your email address" ></td>
</tr>
<tr>
<td>What is your age?
<td><input type="number" name ="age" placeholder="Enter your age.." ></td>
</tr>
<tr>
<td>Where did you took vaccine?
<td id="location_list">
<select name="locate" type="text">
<option>At collage</option>
<option>At Govt. Hospital</option>
<option>At Private Hospital</option>
</select>
</td>
</tr>
<tr>
<td>Which vaccine you took?
<td id="radio_btn">
<input type="radio" name="vaccine" value="Covishield"><label for="vaccine">Covishield</label>
<br>
<input type="radio" name="vaccine" value="Covaxin"><label for="vaccine">Covaxin</label>
<br>
<input type="radio" name="vaccine" value="Sputnik"><label for="vaccine">Sputnik</label>
</td>
</tr>
<tr>
<td>Which of your relatives has been vacinated?
<td id="checkbox_btn">
<input name="vaccinated_relative" type="checkbox" value="Brother"><label for="vaccinated_relative">Brother</label>
<br>
<input name="vaccinated_relative" type="checkbox" value="Sister"><label for="vaccinated_relative">Sister</label>
<br>
<input name="vaccinated_relative" type="checkbox" value="Father"><label for="vaccinated_relative">Father</label>
<br>
<input name="vaccinated_relative" type="checkbox" value="Mother"><label for="vaccinated_relative">Mother</label>
<br>
<input name="vaccinated_relative" type="checkbox" value="No one"><label for="vaccinated_relative">No one</label>
</td>
</tr>
<tr>
<td>Please describe your thoughts about vaccination
<td>
<textarea name="describe_vaccinated_relative" id="" cols="22" placeholder="your thoughts about vaccination..."></textarea>
</td>
</tr>
<tr>
<td id="btn" colspan="2">
<button type="submit">Submit</button>
</td></tr>
</table>
</form>
</body>
<script>
// declaring varibles to access form element
var name =
document.forms["feedback"]["Name"];
var email =
document.forms["feedback"]["Email"];
var age =
document.forms["feedback"]["age"];
var locate =
document.forms["feedback"]["locate"];
var vaccine =
document.forms["feedback"]["vaccine"];
var vaccinated_relative =
document.forms["feedback"]["vaccinated_relative"];
var describe_vaccinated_relative =
document.forms["feedback"]["describe_vaccinated_relative"];
// declaration of display function
function display() {
var emotions =""
for (let i = 0; i < vaccinated_relative.length; i++) {
if (vaccinated_relative[i].checked) {
emotions +=vaccinated_relative[i].value+", "
}
}
// showing vaccine and emotions
alert("I took '"+vaccine.value+"' vaccine and In my family "+emotions+" took vaccine ")
}
function validate() {
// validating inputs
if (name.value == "") {
alert("Please enter your name.");
name.focus();
return false;
}
if (email.value == "") {
alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (age.value ==null) {
alert(
"Please Enter your age.");
age.focus();
return false;
}
if (locate.selectedIndex < 1) {
alert(
"Please Select where did it happen.");
locate.focus();
return false;
}
if (vaccine.value == "") {
alert("Please Select at what vaccine of the day did it happen");
vaccine.focus();
return false;
}
if (vaccinated_relative.selectedIndex<1) {
alert("Please Select what emotions did you vaccinated relatived.");
vaccinated_relative.focus();
return false;
}
if (describe_vaccinated_relative.value=="") {
alert("Please describe you positive vaccinated_relative");
describe_vaccinated_relative.focus();
return false;
}
display();//calling display function after validation
return false; //if it is true then form will be submitted and go to new page
}
</script>
</html>Editor is loading...