HTML code to prepare student result sheet in website using jquery

 

In this tutorial, we are going to learn how to create an HTML code to prepare a student result sheet on the website and get the results using Jquery.

ok, Let's see, we have to build a simple website  with 

• HTML code for marksheets like pass or fail and 
• where you can upload the student data like their student name, Marks in different subjects, and finalize the total Marks and results. 
• If the student is Pass or Fail status. And the implementation of using HTML code and Jquery.

ok, Whatever you entered in the HTML code in the editor it will be displayed like plain text and the type of tag you are using in the HTML.

HTML code student result sheet:-

<div class="container py-5">
<h1 class="text-center">Student Marksheet Insert</h1><br/>
<div id="success" class="alert alert-success close" style="display:none;">

</div>
 
<fieldset>
<div class="row py-5">
  <div class="col">
    <input type="text" id="name" class="form-control" placeholder="Student Name">
  </div>
  <div class="col">
    <input type="text" id="stdclass" class="form-control" placeholder="Class" >
  </div>
</div>
</fieldset>

<table class="table table-bordered" >
 <thead>
    <tr>
      <th scope="col" colspan="6" class="text-center">Insert Student Marks</th>
    </tr>
	<tr>
            <th>English</th>
            <th>Tamil</th>
            <th>Hindi</th>
            <th>Computer</th>
			<th>History</th>
			<th>Science</th>
        </tr>
  </thead>
  <tbody>
  <tr>
  
<td><input type="text" id="english" class="form-control" ></td>
<td><input type="text" id="tamil" class="form-control" ></td>
<td><input type="text" id="hindi" class="form-control" ></td>
<td><input type="text" id="computer" class="form-control" ></td>
<td><input type="text" id="history" class="form-control" ></td>
<td><input type="text" id="science" class="form-control" ></td>


  </tr>
  <tr>
  <td colspan="6">
  <div class="d-grid col-6 mx-auto gap-2">
  <input type="submit" id="save" class="btn btn-primary" name ="save" value="Insert Data">
  <input type="reset" id="reset" class="btn btn-danger" name="reset" value="Reset"/>
  </div>
  </td>
  </tr>
  </tbody>
</table>

<div class="py-5"></div>
<table class="table table-bordered">
<tr>
<td><strong>Name:</strong></td>
<td id="txtname"></td>
</tr>
<tr>
<td ><strong>Class:</strong></td>
<td id="txtclass"></td>
</tr>
</table>
<div class="text-success py-3">
<hr>
</div>
<table class="table table-bordered">
<th>Subject</th>
<th>Marks</th>
<tr>
<td>English</td>
<td id="txtEnglish"></td>
</tr>
<tr>
<td>Tamil</td>
<td id="txttamil"></td>
</tr>
<tr>
<td>Hindi</td>
<td id="txthindi"></td>
</tr>
<tr>
<td>Computer</td>
<td id="txtcomputer"></td>
</tr>
<tr>
<td>History</td>
<td id="txthistory"></td>
</tr>
<tr>
<td>Science</td>
<td id="txtscience"></td>
</tr>
<tr>
<td class="text-center"><b>Total</b></td>
<td id="txttotal"></td>
</tr>
<tr>
<td class="text-center"><b>Results</b></td>
<td id="txtresult"></td>
</tr>
</table>


</div>

Here, I am going with the <input> tag,<table> tag for the proper customize the data to display into the table, and <button> tag for submitting the data to jquery.

Now, we are going to add the student details, name, class, and marks. Once, the data is entered in the input tag and submit button is clicked. The data are submitted to the jquery function and jquery analysis the data are filled proper manner. If the data are not filled show errors to fill and final the jquery calculate the marks and return total Marks and Finally, analysis the student are Pass or Fail shown in the Result tabular row.     

Jquery Script:

 

<script type="text/javascript">
$(document).ready(function(){
	$('#save').on('click',function(){
		var name = $('#name').val();
		var stdclass = $('#stdclass').val();
		var english = $('#english').val();
		var tamil = $('#tamil').val();
		var hindi = $('#hindi').val();
		var computer = $('#computer').val();
		var history = $('#history').val();
		var science = $('#science').val();
		var presult = 'Pass';
		var fresult = 'Fail';
		var totalMarks = parseInt(english)+parseInt(tamil)+parseInt(hindi)+parseInt(computer)+parseInt(history)+parseInt(science);
		
        var averageMarks = totalMarks / 6;    
		
                    
	if(name!='' && stdclass!='' && english!='' && tamil!='' && hindi!='' && computer!='' && history!='' && science!='')
	{       $('#txtname').html(name);
	        $('#txtclass').html(stdclass);
			$('#txtEnglish').html(english);
			$('#txttamil').html(tamil);
			$('#txthindi').html(hindi);
			$('#txtcomputer').html(computer);
			$('#txthistory').html(history);
			$('#txtscience').html(science);
			$('#txttotal').html(totalMarks);
			
		
	}
	else{
		alert('Please All the fields');
	}
		
	if(english>=35 && tamil>=35 && hindi>=35 && computer>=35 && history>=35 && science>=35)
	{
	   $('#txtresult').html(presult);
	   
	}
else{
        $('#txtresult').html(fresult);
}
	
	
});
 $('#reset').click(function() {
        $(':input')
            .not(':button, :submit, :reset, :hidden')
            .val('')
            .removeAttr('checked')
            .removeAttr('selected');
    });
	
	
	
	
});
</script>

I hope you will learn how to create a html code to prepare student result sheet in website and just copy or download the source code and paste code and change you wish.

Download source code