Saturday, April 14, 2018

Total Salary Computation in JQuery

Here is a simple program that I wrote using JQuery to compute the total salary of the employee's in the company. The code is very easy to understand and use.

I am currently accepting programming work, it project, school programming projects , thesis and capstone projects, IT consulting work and web development work kindly contact me in the following email address for further details. Thank you.

My email address are the following jakerpomperada@gmail.com and jakerpomperada@yahoo.com.

My mobile number here in the Philippines is 09173084360.

My telephone number at home here in Bacolod City, Negros Occidental Philippines is  +63 (034) 4335675.




Sample Program Output


Program Listing

index.htm

<html>
<head>
<title>Total Salary Computation in JQuery</title>
</head>
<body>
 <style type="text/css">
 
  body {
  font-family: arial;
  size:15px;
  font-weight: bold;
  background-color: lightgreen;
  }
 </style>
 <br>
 <h2> Total Salary Computation in JQuery </h2>
<table cellpadding="5">
<tr>
<td><b>Employee Name</b></td> 
<td><b>Salary</b></td>
</tr>
<tr><td></td> </tr>
<tr>
<td>Allie Pomperada</td>
<td><input type='text' class='salary' /></td>
</tr>
<tr>
<td>Jake Pomperada</td>
<td><input type='text' class='salary' /></td>
</tr>
<tr>
<td>Jacob Samuel Pomperada</td>
<td><input type='text' class='salary' /></td>
</tr>
<tr>
<td>Julianna Rae Pomperada</td>
<td><input type='text' class='salary' /></td>
</tr>

<tr>
<td>Total Salary PHP</td>
<td><input type='text' id='totalSalary' disabled/></td>
</tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>

<script>
$('.salary').keyup(function () {
    var sum = 0;
    $('.salary').each(function() {
        sum += Number($(this).val());
    });
$('#totalSalary').val(sum.toFixed(2));
});
</script>

</body>
</html>





No comments:

Post a Comment