You must Sign In to post a response.
  • Category: ASP.NET

    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
    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
    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
    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
    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
    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
    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


Sign In to post your comments