Sir currently i am working on a html form. This form is basically related to attendance of students.
In a row there are four value
1.Name(label)
2.Attence(Dropdown list, option are (Present,Tardly,Absent-Excused,Absent Unexcused))
3.Reason (Dropdown list, option are (Doctor meeting, injury)
4. Attendance notes( teatarea)
Question1 : If we have not selected attendance of any student and suppose we have 100 student then
after 100 dropdownlist of attence column. there should be a message "please select attendance"
Question 1 : Suppose there are 100 records. and Suppose if Number 49 is (absent-Excused) then this
drop-down should should red and display message (“Please provide reason for absent”) beside or below
the same field .and no any alert should be there. And also if multiple records are missing then they
all should be red. This validation should happen when user clicks on save button or when he selects
“Absent-Excused” in the dropdown (onchange event)
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Attendance Register</title>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
function validFormData() {
if(document.getElementById('ddlfirst').value=="0" )
{
document.getElementById('error').innerHTML="*Please select the attendance*";
}
else if ((document.getElementById("ddlfirst").value == "3" && (document.getElementById
("ddlsecond").value == "0")) || (document.getElementById("ddlfirst").value == "4" &&
(document.getElementById("ddlsecond").value == "0")) ) {
document.getElementById('ddlfirst').style.border = '1px solid red';
document.getElementById('error').innerHTML="*Please select the reason*";
return false;
}
}
</script>
</head>
<body>
<div class="navbar-fixed-top">
<div class="gray-default">
<h2 class="text-heading">Student Attendance</h2>
</div>
<div class="gray-default">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<label >Class Name</label>
</div>
<div class="col-sm-8">
<p >XII</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label >Date</label>
</div>
<div class="col-sm-8">
<p >05-June-2015</p >
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label >Program Name</label>
</div>
<div class="col-sm-8">
<p >Program1</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<label >Class Name</label>
</div>
<div class="col-sm-8">
<p >XII</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label >Date</label>
</div>
<div class="col-sm-8">
<p >05-June-2015</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label >Program Name</label>
</div>
<div class="col-sm-8">
<p >Program1</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="body-margin">
<div class="container">
<div class="pad-tb-25">
<form id="chechvalidation">
<h3 class="subject-heading">Enrolled Students</h3>
<div class="row pad-t-5">
<div class="col-sm-4">
<h4 class="pad-t-15">Jon Doe 3699 Freshman (9) spring</h4>
</div>
<div class="col-sm-2">
<label>Attendance</label>
<select class="form-control" id="ddlfirst">
<option value="0">Please Select</option>
<option value="1">Present</option>
<option value="2">Tardy</option>
<option value="3">Absent-Excused</option>
<option value="4">Absent-Unexcused</option>
</select>
<div id="error" class="text-danger"></div>
</div>
<div class="col-sm-2">
<label>Reason</label>
<select class="form-control" id="ddlsecond">
<option value="0">Please Select</option>
<option value="1">Sick</option>
<option value="2">Doctors Appointment</option>
<option value="3">Other</option>
<option value="4">Injury</option>
<option value="5">School Activity</option>
<option value="6">Family Obligation</option>
</select>
</div>
<div class="col-sm-4">
<label>Attendance Notes</label>
<textarea class="form-control" rows="1" ></textarea>
</div>
</div>
<div class="row pad-t-5">
<div class="col-sm-4">
<h4 class="pad-t-15">yatender tomar</h4>
</div>
<div class="col-sm-2">
<select class="form-control" id="ddlthird">
<option value="0">Please Select</option>
<option value="1">Present</option>
<option value="2">Tardy</option>
<option value="3">Absent-Excused</option>
<option value="4">Absent-Unexcused</option>
</select>
<div id="error" class="text-danger"></div>
</div>
<div class="col-sm-2">
<select class="form-control" id="ddlfour">
<option value="0">Please Select</option>
<option value="1">Sick</option>
<option value="2">Doctors Appointment</option>
<option value="3">Other</option>
<option value="4">Injury</option>
<option value="5">School Activity</option>
<option value="6">Family Obligation</option>
</select>
</div>
<div class="col-sm-4">
<textarea class="form-control" rows="1" ></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary btn-color" id='regbtn' onclick="return validFormData();">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
