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

Leave a Reply

Your email address will not be published. Required fields are marked *