User Interface
Output After Submitting Form
Source Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function Check()
{
var name = document.getElementById("n").value;
var fname = document.getElementById("fn").value;
var standard = document.getElementById("c").value;
var roll = document.getElementById("r").value;
var math = document.getElementById("mm").value;
var urdu = document.getElementById("um").value;
var eng = document.getElementById("em").value;
var chem = document.getElementById("cm").value;
var phy = document.getElementById("pm").value;
var d1 = document.getElementById("display1");
var d2 = document.getElementById("display2");
var d3 = document.getElementById("display3");
var d4 = document.getElementById("display4");
var d5 = document.getElementById("display5");
var d6 = document.getElementById("display6");
var d7 = document.getElementById("display7");
var d8 = document.getElementById("display8");
var d9 = document.getElementById("display9");
var d10 = document.getElementById("display10");
var obtained = parseInt(math) + parseInt(eng) + parseInt(chem) + parseInt(urdu) + parseInt(phy);
var percentage = obtained * 100 / 500;
d1.innerHTML = "Your Name is:" + name;
d2.innerHTML = "Your Father Name is:" + fname;
d3.innerHTML = "Your Class is:" + standard;
d4.innerHTML = "Your Roll no is:" + roll;
d5.innerHTML = "Your obtained marks are: " + obtained;
d6.innerHTML = "Your PErcentage is: " + percentage;
if(percentage >= 80)
{
d7.innerHTML = "Grade: A-1 !!";
}
else if(percentage >= 70)
{
d7.innerHTML = "Grade: A !!";
}
else if(percentage >= 60)
{
d7.innerHTML = "Grade: B !!";
}
else if(percentage >= 50)
{
d7.innerHTML = "Grade: C !!";
}
else if(percentage >= 40)
{
d7.innerHTML = "Grade: D !!";
}
else if(percentage >= 33)
{
d7.innerHTML = "Grade: E !!";
}
else
{
d7.innerHTML = "Grade: F (Fail) !!";
}
// if else if for remarks
if(percentage >= 80)
{
d8.innerHTML = "Remarks: Excellent !!";
}
else if(percentage >= 70)
{
d8.innerHTML = "Remarks: Very Good !!";
}
else if(percentage >= 60)
{
d8.innerHTML = "Remarks: Good !!";
}
else if(percentage >= 50)
{
d8.innerHTML = "Remarks: Fair !!";
}
else if(percentage >= 40)
{
d8.innerHTML = "Remarks: Poor !!";
}
else if(percentage >= 33)
{
d8.innerHTML = "Remarks: Needs Improvement !!";
}
else
{
d8.innerHTML = "Remarks: You are fail !!";
}
//var supply = 0;
if(math < 33)
{
//supply++;
d10.innerHTML += "You have supply in maths !! <br/>";
}
if(eng < 33)
{
// supply++;
d10.innerHTML += "You have supply in English !! <br/>";
}
if(chem < 33)
{
// supply++;
d10.innerHTML += "You have supply in Chemistry !! <br/>";
}
if(phy < 33)
{
// supply++;
d10.innerHTML += "You have supply in Physics !! <br/>";
}
if(urdu < 33)
{
// supply++;
d10.innerHTML += "You have supply in Urdu !! <br/>";
}
//d9.innerHTML = "Supply: " + supply;
}
</script>
</head>
<body>
<center>
<table border="3" height="400" width="400">
<form>
<tr>
<th colspan="2">MARKSHEET</th>
</tr>
<tr>
<td><label>Name: </label></td>
<td><input type="text" id="n" /></td>
</tr>
<tr>
<td><label>Father Name: </label></td>
<td><input type="text" id="fn" /></td>
</tr>
<tr>
<td><label>Class: </label></td>
<td><input type="text" id="c" /></td>
</tr>
<tr>
<td><label>Roll No: </label></td>
<td><input type="text" id="r" /></td>
</tr>
<tr>
<td><label>Maths Marks </label></td>
<td><input type="text" id="mm" /></td>
</tr>
<tr>
<td><label>English Marks </label></td>
<td><input type="text" id="em" /></td>
</tr>
<tr>
<td><label>Urdu Marks </label></td>
<td><input type="text" id="um" /></td>
</tr>
<tr>
<td><label>Chemistry Marks </label></td>
<td><input type="text" id="cm" /></td>
</tr>
<tr>
<td><label>Physics Marks </label></td>
<td><input type="text" id="pm" /></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2"><input type="button" value="Submit" onclick="Check()" /></td>
</tr>
</form>
</table>
<h1 id="display1"></h1>
<h1 id="display2"></h1>
<h1 id="display3"></h1>
<h1 id="display4"></h1>
<h1 id="display5"></h1>
<h1 id="display6"></h1>
<h1 id="display7"></h1>
<h1 id="display8"></h1>
<h1 id="display9"></h1>
<h1 id="display10"></h1>
</center>
</body>
</html>
Click Below Link to Download Source Of This Blog
https://www.mediafire.com/file/xr6xba0lzb7zouv/MARKSHEET_USING_FORMS.html/file
No responses yet