Skip to main content

Calculate Sum and average of two or more Textbox values using JQuery

We can calculate sum and average of values entered in textboxes with the help of small piece of jQuery code.

First of all let’s create a HTML form where we’ll ask user to enter marks in each subject, under body section add following HTML:

<table class="demo-table">
    <tr class="label">
        <td colspan="2">Please enter marks(0-99):</td>
    </tr>
    <tr>
        <td>English</td>
        <td>
            <input type="text" class="txtMarks" name="txtMarks"
            maxlength="2" /></td>
    </tr>
    <tr>
        <td>Hindi</td>
        <td>
            <input type="text" class="txtMarks" name="txtMarks"
            maxlength="2" /></td>
    </tr>
    <tr>
        <td>Math</td>
        <td>
            <input type="text" class="txtMarks" name="txtMarks"
            maxlength="2" /></td>
    </tr>
    <tr>
        <td>Science</td>
        <td>
            <input type="text" class="txtMarks" name="txtMarks"
            maxlength="2" /></td>
    </tr>
    <tr>
        <td>Economics</td>
        <td>
            <input type="text" class="txtMarks" name="txtMarks"
            maxlength="2" /></td>
    </tr>
    <tr class="label">
        <td class="right">Total Marks :</td>
        <td class="center"><span id="totalMarks">0</span></td>
    </tr>
    <tr class="label">
        <td class="right">Average :</td>
        <td class="center"><span id="average">0</span></td>
    </tr>
</table>

As you can see in HTML we have used some classes to style our form add these classes under head section as:

<style>
    body
    {
        font-family: arial;
        color: #014E63;
    }

    .demo-table
    {
        border-collapse: collapse;
        background-color: #FCFCFC;
        width: 400px;
        border: 1px solid;
    }

    .demo-table td
    {
        border: 1px solid;
    }

    .demo-table td.right
    {
        text-align: right;
    }

    .demo-table td.center
    {
        text-align: center;
    }

    .label
    {
        font-size: 18px;
        font-weight: bold;
    }

    .txtMarks
    {
        background-color: #BFDCE1;
        font-weight: bold;
        text-align: right;
    }
</style>

Our form is ready now and we’ll add jQuery code to get the sum and average:

First of all add reference to jQuery library, so that jQuery will work on our page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>

Now add the jQuery code to show Sum and average of entered numbers:

<script type="text/javascript">
    $(document).ready(function () {
        //iterate through each textboxes
        $('.txtMarks').each(function () {

            // call 'calcSumAndAverage' method on keyup handler.
            $(this).keyup(function () {
                calcSumAndAverage();
            });
        });
    });

    function calcSumAndAverage() {
        var total = 0;
        var average = 0;

        //iterate through each textboxes with class name '.txtMarks'
        //and add the values.
        $('.txtMarks').each(function () {

            //add only if the value is number
            if (!isNaN(this.value) && this.value.length != 0) {
                total += parseFloat(this.value);
            }
        });

        //Calculate the Average
        if (!isNaN(total) && total != 0) {

            //Get count of textboxes with class '.txtMarks'
            var txtboxes = $('.txtMarks').length;
            average = parseFloat(total) / txtboxes;
        }

        //Show Total Marks.
        $('#totalMarks').html(total);
        // Show Average upto 2 decimal places using .toFixed() method.
        $('#average').html(average.toFixed(2));
    }
</script>

I have added comments to clear understanding of code, in above code we simply calling ‘calcSumAndAverage’ method on ‘keyup’ event of each textbox and inside this method we calculate sum and average of entered numbers.

When you view this page in browser, output will be look like:


Check live Demo and Code.

Popular posts from this blog

C#: Merging Excel cells with NPOI HSSFWorkbook

In this post we’ll see how to merge the two or more cell with each other while creating the excel sheet using NPOI.
Mentioned below is code to merge multiple cells, in this example we are merging first cell to fifth cell of first row (you can adjust row or cell range by passing particular parameters in CellRangeAddress).
//Created new Workbook var hwb = new NPOI.HSSF.UserModel.HSSFWorkbook(); //Create worksheet with name. var sheet = hwb.CreateSheet("new sheet"); //Create row and cell. var row = sheet.CreateRow(0); var cell = row.CreateCell(0); ; //Set text inside cell cell.SetCellValue("This is Merged cell"); cell.CellStyle.WrapText = true; //define cell range address // parameters: -> first row to last and first cell to last cell var cra = new NPOI.SS.Util.CellRangeAddress(0, 0, 0, 4); //Add merged region to sheet. sheet.AddMergedRegion(cra);
Hope this solution helps you J

Read and parse a CSV file into an array of rows and columns in C#

The following PopulateCsvIntoArraymethod used to read the CSV file into a two-dimensional array of strings.
I have included explanation of method lines, wherever needed. ///<summary> /// Populate the CSV file into an array, /// We assume that every line has the same number of fields and there may be blank lines. ///</summary> ///<returns></returns> privatestring[,] PopulateCsvIntoArray() { // Get path of CSV file. var path = Server.MapPath("~/Folder_Name/testfile.csv"); // Get the file's text using ReadAllText method. string fileData = System.IO.File.ReadAllText(path);
// Split CSV data into lines.     fileData = fileData.Replace('\n', '\r'); string[] lines = fileData.Split(newchar[] { '\r' }, StringSplitOptions.RemoveEmptyEntries);
// Get rows and columns counts. int totalRows = lines.Length;