Category: ASP.NET

30 Jun 2016 06:08

Joined:	13/08/2015
Level:	Silver
Points:	102

Points:	5

How to Subtract(-),Divide(/) Two text box values Running time using jquery

Hi Developers,

My Query is working fine for sum of Two numbers Addition(+).
But I need Subtract and Divide Action of that text Box,
i cant able to Done it and also by Google it.
i am adding - instead of + but i didn't get exact output.
So help me to How am Perform Subtract and Divide Options on Running time.

<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//Iterate through each Textbox and add keyup event handler
$(".clsTxtToCalculate").each(function () {
$(this).keyup(function () {
//Initialize total to 0
var total = 0;
$(".clsTxtToCalculate").each(function () {
// Sum only if the text entered is number and greater than 0
if (!isNaN(this.value) && this.value.length != 0) {
total = total - parseFloat(this.value);
}
});
//Assign the total to label
//.toFixed() method will roundoff the final sum to 2 decimal places
$('#<%=lblTotalPrice.ClientID %>').html(total.toFixed(2));
});
});
});
</script>

<table border="1px" cellpadding="5" style="border-collapse: collapse;">
<tr style="text-align: left;">
<th>
No.</hd>
<th>
Item
</th>
<th>
Price
</th>
</tr>
<tr>
<td>
1
</td>
<td>
Milk:
</td>
<td>
<asp:TextBox ID="txtMilk" CssClass="clsTxtToCalculate" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Bread:
</td>
<td>
<asp:TextBox ID="txtBread" CssClass="clsTxtToCalculate" runat="server"></asp:TextBox>
</td>
</tr>

<tr>
<td>

</td>
<td>
<b>Total Price</b>
</td>
<td>
<asp:Label ID="lblTotalPrice" runat="server"></asp:Label>
</td>
</tr>
</table>

Sorry For Repeated Posts Friends
Thanking You
Paul.S

#766981

30 Jun 2016 22:11

Joined:	03/05/2013
Level:	Gold
Points:	15822

Points:	4

Hi Paul,

first you need to get the textbox values into one variable and then perform the action which you want, I will give some sample,


var txt1=document.getElementById("Textbox1").Value;
var txt2=document.getElementById("Textbox2").Value;

var sub=parseInt(txt1) - parseInt(txt2);

document.getElementById("lblresult").innerHtml = sub;

You can do the same way for subtraction also,

Refer below link for more details http://stackoverflow.com/questions/29605016/subtract-html-textbox-values-using-jquery-javascript

--------------------------------------------------------------------------------
Give respect to your work, Instead of trying to impress your boss.

N@veen
Blog : http://naveens-dotnet.blogspot.in/

#766983

30 Jun 2016 22:20

Joined:	29/05/2009
Level:	Gold
Points:	10380

Points:	4

Hi

try this script



<input type="text" class="add" />
<input type="text" class="add" />
<input type="text" class="sub" />
<input type="text" class="sub" />
<label id="total"></label>


$('.add').blur(function () {
     var sum = 0;
     $('.add').each(function () {
         if (!isNaN(this.value) && this.value.length != 0) {
             sum += parseFloat(this.value);
         }
     });

     $('#total').text(sum.toFixed(2));

 });

 $('.sub').blur(function () {
     var sum = 0;
     var val = $('#total').text();
     $('.sub').each(function () {
         if (!isNaN(this.value) && this.value.length != 0) {
             sum -= parseFloat(this.value);

         }
     });
     val = parseFloat(sum) - parseFloat(val);
     $('#total').text(val);

 });



val =  parseFloat(sum) - parseFloat(val);
to:

val =  parseFloat(val) + parseFloat(sum);

you can refer this url


"stackoverflow.com/questions/18540937/addition-and-subtraction-multiple-text-fields"

Name : Dotnet Developer-2015
Email Id : kumaraspcode2009@gmail.com

'Not by might nor by power, but by my Spirit,' says the LORD Almighty.

#767007

01 Jul 2016 00:35

Joined:	13/08/2015
Level:	Silver
Points:	102

Points:	1

Thanks , thanks a lot of all your kindful replies.

Following query is exact working for me.
but am having a small problem.

Subtract Symbol is automatically added infront of Result Value.
how i am remove the subtract symbol with using this query.

all are fine only problem is - symbol.
Can i remove the symbole .? if there is any oiptions available please tell me friends

<scripttype="text/javascript">
$(document).ready(function(){
$(".clsTxtToCalculate").each(function(){
$(this).keyup(function(){
vartotal=0;
$(".clsTxtToCalculate").each(function(){
if(!isNaN(this.value)&&this.value.length!=0)
{
total=parseFloat(this.value)-parseFloat(total);
}
});
$('#<%=lblTotalPrice.ClientID%>').html(total.toFixed(2));
});
});
});
</script>

Thanking with
Paul.S

#767009

01 Jul 2016 00:45

Joined:	03/05/2013
Level:	Gold
Points:	15822

Points:	3

Hi Paul,

Have you debug the below piece of code in browser (by pressing F12 and select Source).


total=parseFloat(this.value)-parseFloat(total);

I suspect this line may be wrong entry, you just have a look into this line you are subtracting the value from total and assign back that to total again, that means second value is always high, that is the reason may be it shows - mark before that.

--------------------------------------------------------------------------------
Give respect to your work, Instead of trying to impress your boss.

N@veen
Blog : http://naveens-dotnet.blogspot.in/

#767016

01 Jul 2016 04:13

Joined:	13/06/2007
Level:	Gold
Points:	21327

Points:	4

The syntax is simple but do not forget to parse, see below snippet


$(function() {
    $(document).on('blur change keyup', '.add, .sub', function(e) {
        var sum = 0;
        $('.add, .sub').each(function(i) {
            if (!isNaN(this.value) && this.value.length != 0) {
                if ($(this).hasClass('add')) {
                    sum += parseFloat(this.value);
                }
                else {
                    sum -= parseFloat(this.value);
                }
            }
        });
        $('#total').text(sum.toFixed(2));
    })
})

Thanks
Koolprasd2003
Editor, DotNetSpider MVM
Microsoft MVP 2014 [ASP.NET/IIS]

#767018

01 Jul 2016 05:36

Joined:	05/06/2009
Level:	Gold
Points:	10245

Points:	3

You can use the normal (-) operator for subtraction and also you can use the (/) operator for division. The issues is if you do simple (-) and (/) on some javascript variable, you will not get the correct output. First you have to convert into the corresponding type. You can use parseFloat, parseInt etc.

Following are the sample code for the conversion


val =  parseFloat(Firstvalue) - parseFloat(Secondvalue);
val =  parseFloat(Firstvalue) /  parseFloat(Secondvalue);

By Nathan
Direction is important than speed

How to Subtract(-),Divide(/) Two text box values Running time using jquery

About dotnetspider.com

Quick Links

General

Services