Subtract HTML Textbox Values using jQuery / JavaScript

Question

I want to subtract the values once a user put the value in textfield but unable to do so. Here is an example of sum but I want it same for subtracting:

<table style="border-collapse:collapse;background-color:#E8DCFF" border="1" width="300px">
    <tbody>
        <tr>
            <td width="40px">1</td>
            <td>Butter</td>
            <td><input class="txt" name="txt" type="text"></td>
        </tr>            
        <tr>
            <td>2</td>
            <td>Eggs</td>
            <td><input class="txt" name="txt" type="text"></td>
        </tr>            
        <tr>
            <td>3</td>
            <td>Bread</td>
            <td><input class="txt" name="txt" type="text"></td>
        </tr>
        <tr>
            <td>4</td>
            <td>Soap</td>
            <td><input class="txt" name="txt" type="text"></td>
        </tr>
        <tr id="summation">
            <td> </td>
            <td align="right">Sum :</td>
            <td align="center"><span id="sum">0</span></td>
        </tr>
    </tbody>
</table>

Here is jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $(".txt").each(function(){
            $(this).keyup(function(){
                calculateSum();
            });
        });
    });
    function calculateSum(){
        var sum = 0;
        $(".txt").each(function(){
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
            }
        });
        $("#sum").html(sum.toFixed(2));
    }
</script>

what kind of problem are you facing?

Rishi Prakash
– Rishi Prakash

2015-04-13 12:20:48 +00:00
Commented Apr 13, 2015 at 12:20 — Rishi Prakash
– Rishi Prakash, Commented Apr 13, 2015 at 12:20

adricadar · Accepted Answer · 2015-04-13 12:40:58Z

1

You can add a total value, and substract every time you insert something new.

$(document).ready(function(){
	$("#sum").data('total', 600).html(600); // add total value of 600
	$(".txt").each(function(){
		$(this).keyup(function(){
			calculateSum();
		});
	});
});
function calculateSum(){
	var $sum = $("#sum");
	var sum = parseInt($sum.data('total'), 10); // get total value
	$(".txt").each(function(){
		if (!isNaN(this.value) && this.value.length != 0) {
			sum -= parseFloat(this.value);
		}
	});
	$sum.html(sum.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table style="border-collapse:collapse;background-color:#E8DCFF" border="1" width="300px">
    <tbody>
        <tr>
            <td width="40px">1</td>
            <td>Butter</td>
            <td><input class="txt" name="txt" type="text"></td>
        </tr>            
        <tr>
            <td>2</td>
            <td>Eggs</td>
            <td><input class="txt" name="txt" type="text"></td>
        </tr>            
        <tr>
            <td>3</td>
            <td>Bread</td>
            <td><input class="txt" name="txt" type="text"></td>
        </tr>
        <tr>
            <td>4</td>
            <td>Soap</td>
            <td><input class="txt" name="txt" type="text"></td>
        </tr>
        <tr id="summation">
            <td></td>
            <td align="right">Total: </td>
            <td align="center"><span id="sum"></span></td>
        </tr>
    </tbody>
</table>

edited Apr 13, 2015 at 12:40

answered Apr 13, 2015 at 12:23

adricadar

10.2k5 gold badges35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manindra Singh Over a year ago

adricadar : thnks for ur help.its working nicely but is it possible to get it without fix value.

adricadar Over a year ago

@ManindraSingh you mean with pozitive and negative values? What are you trying yo substract?

Collectives™ on Stack Overflow

Subtract HTML Textbox Values using jQuery / JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related