Question 69442 in Html Question posted in
Some basic documentation can be found here.

sum of textboxes with javascript and using comma instead of dot in decimal numbers – Html

I found a code block on the web that does the sum of textboxes. This block of code looked exactly what I was looking for, but I need to use commas instead of dots for decimal numbers, and I even need to prevent the entry of periods in textboxes. unfortunately my javascript knowledge is very amateur and i don’t know how to do this. can you help me with this
thanks

<html>
    <head>
        <title>Sum Html Textbox Values using jQuery/JavaScript</title>
        <style>
            body {
                font-family: sans-serif;
            }
            #summation {
                font-size: 18px;
                font-weight: bold;
                color:#174C68;
            }
            .txt {
                background-color: #FEFFB0;
                font-weight: bold;
                text-align: right;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </head>
    <body>
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
    <tr>
        <td width="40px">1</td>
        <td>Butter</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Cheese</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Eggs</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr>
        <td>4</td>
        <td>Milk</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr>
        <td>5</td>
        <td>Bread</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr>
        <td>6</td>
        <td>Soap</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr id="summation">
        <td>&nbsp;</td>
        <td align="right">Sum :</td>
        <td align="center"><span id="sum">0</span></td>
    </tr>
</table>
<script>
    $(document).ready(function(){
 
        //iterate through each textboxes and add keyup
        //handler to trigger sum event
        $(".txt").each(function() {
 
            $(this).keyup(function(){
                calculateSum();
            });
        });
 
    });
 
    function calculateSum() {
 
        var sum = 0;
        //iterate through each textboxes and add the values
        $(".txt").each(function() {
 
            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
 
        });
        //.toFixed() method will roundoff the final sum to 2 decimal places
        $("#sum").html(sum.toFixed(2));
    }
</script>

jsfiddle link

Tags:

2

Answers


  1. 0

    You can modify the existing code block to use commas instead of dots in decimal numbers and prevent the entry of periods in textboxes as follows:

    In the $(document).ready() function:

    $(document).ready(function(){
     
        //iterate through each textboxes and add keyup
        //handler to trigger sum event
        $(".txt").each(function() {
    
            //Prevent entry of period in textboxes
            $(this).keypress(function (event) {
                var keyCode = event.which;
                if (keyCode == 46) {
                    event.preventDefault();
                }
            });
    
            //Replace commas with dots
            $(this).keyup(function(){
                var value = $(this).val();
                value = value.replace(/,/g, '.');
                $(this).val(value);
                calculateSum();
            });
        });
    
    });

    The keypress event is added to each textbox to prevent the entry of period (keyCode 46).
    The keyup event is modified to replace commas with dots, and then trigger the calculateSum() function.

    In the calculateSum() function:

    function calculateSum() {
    
        var sum = 0;
        //iterate through each textboxes and add the values
        $(".txt").each(function() {
    
            //Replace commas with dots
            var value = $(this).val();
            value = value.replace(/,/g, '.');
    
            //add only if the value is number
            if(!isNaN(value) && value.length!=0) {
                sum += parseFloat(value);
            }
    
        });
        //.toFixed() method will roundoff the final sum to 2 decimal places
        var sumString = sum.toFixed(2).replace(/./g, ',');
        $("#sum").html(sumString);
    }

    The code to replace commas with dots is added for each textbox value.
    The final sum is converted back to a string with commas instead of dots using the replace() method.

    Login or Signup to reply.
  2. 0

    In order to replace the dot with a comma, you will need to convert your sum ( float ) to a string. Then you can just use the .replace() method in order to replace all the dots by commas. Here is the code :

    //.toFixed() method will roundoff the final sum to 2 decimal places

    sum = sum.toFixed(2);
    sum.toString();
    sum = sum.replace(".",",");

    $("#sum").html(sum);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search