jquery: percentage of two numbers

Asked 29/11, 2012 at 7:0 Answered 29/11, 2012 at 7:13

EDITED

Thank you for everyone who offered support... the best working script I will share with you in hope that I could help others who is looking for the same solution:

    $(document).ready(function(){
$("#price1, #price2").keyup(function() {
  var priceOne = parseFloat($("#price1").val());
  var priceTwo = parseFloat($("#price2").val());
  var rate = parseFloat($("#rate").val());
  if ($("#price1").val() && $("#price2").val()){     
  $('#rate').val(((priceTwo - priceOne) / priceOne * 100).toFixed(2));
}

});

$("#rate").keyup(function() {
  var priceOne = parseFloat($("#price1").val());
  var rate = parseFloat($("#rate").val());

   if ($("#rate").val() && $("#price1").val() && $("#price2").val()){
 $('#price2').val(((priceOne * rate)/ 100 + priceOne).toFixed(2));
}
});
})

Also you can test it following this LINK

INITIAL QUESTION:

Please help to calculate the percentage between two numbers. I tried one way, but I did not succeed. Please tell me what is wrong, or I will appreciate if you can recommend other script which could help me

my script:

<html>
<head>
 <script type="text/javascript">
$("#rate").text(function() {
    var result = (parseInt(($("#price1").text(), 10) * 100)/ parseInt($("#price2").text(), 10));
    if (!isFinite(result)) result = 0;
    return result;
});?
</script> 

</head>
<body>
<div id="price1"><label><input id="price1" type="text"></label></div>
<div id="price2"><label><input id="price2" type="text"></label></div>
<div id="rate"><label><input id="rate" type="text"></label></div>


</body>
</html>

Thisbee answered 29/11, 2012 at 7:0 Comment(3)

why ? in last line of script tag? maybe problem of Typo.. – Rumsey 29/11, 2012 at 7:3

Sorry, maybe it is wrong there, I am new in this field – Thisbee 29/11, 2012 at 7:9

I am also new.. I think you have copied from other sites, which generates hidden special characters.. remove ? and maybe it will work :) also check adil's answer. – Rumsey 29/11, 2012 at 7:16

use val() instead of text() for input element, use $(function(){}) to wait DOM is ready. And also don't use same ID to elements.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $("#price1, #price2").change(function() { // input on change
    var result = parseFloat(parseInt($("#price1").val(), 10) * 100)/ parseInt($("#price2").val(), 10);
    $('#rate').val(result||''); //shows value in "#rate"
  })
});
</script> 
</head>
<body>
<div id="price-div1"><label>price1</label><input id="price1" type="text"></div>
<div id="price-div2"><label>price2</label><input id="price2" type="text"></div>
<div id="rate-div"><label>rate</label><input id="rate" type="text">%</div>
</body>
</html>

Trivial answered 29/11, 2012 at 7:9 Comment(0)

You have few problems,

? after closing parenthesis of text function.
Repeated id price1 and price2 for both div and textboxes
If you want input from textbox then you should use val() instead of text()

Fixed you code

Live Demo

HTML

<div id="dprice1"><label><input id="price1" type="text" value="80" /></label></div>
<div id="dprice2"><label><input id="price2" type="text" value="100" /></label></div>
<div id="drate"><label><input id="rate" type="text"></label></div>
<input id="btnCal" type="button" value="Calculate">

Javascript

$("#btnCal").click(function() {
    $("#rate").val(function() {
        var result = parseInt($("#price1").val()) * 100 / parseInt($("#price2").val());
        if (!isFinite(result)) result = 0;
        return result;
    });
});

Munger answered 29/11, 2012 at 7:4 Comment(0)

Check this fiddle

http://jsfiddle.net/j3WY3/5/

Have made some corrections:

removed ? as everyone says.
change .text() to .val()
both div and input had same id

Allergy answered 29/11, 2012 at 7:13 Comment(0)

May be you want to use parseFloat() instead of parseInt()

    <div id="price-div1"></label>price1<label><input id="price1" type="text"></div>
    <div id="price-div2"></label>price2<label><input id="price2" type="text"></div>
    <div id="rate-div"><label>rate</label><input id="rate" type="text">%</div>

    <script type="text/javascript">
        $(function() {
            $("#price1, #price2").change(function() {
                var result = parseFloat(parseFloat($("#price1").val(), 10) * 100)/ parseFloat($("#price2").val(), 10);
                $('#rate').val(result||'');
            })
        });
    </script>

Scuff answered 29/11, 2012 at 7:1 Comment(1)

Hi thank you for your try to help me. I tried nut still I do not receive in DIV where is RATE any result – Thisbee 29/11, 2012 at 7:8

Use like this,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<script type="text/javascript">
$("#rate").text(function() {
    var result = (parseFloat(($("#price1").val(), 10) * 100)/ parseFloat($("#price2").val(), 10));
    if (!isFinite(result)) result = 0;
    return result;
});
</script> 
<body>
<div class="price1"><label><input id="price1" type="text"></label></div>
<div class="price2"><label><input id="price2" type="text"></label></div>
<div class="rate"><label><input id="rate" type="text"></label></div>
</body>
</html>

Changed div class, and get input value by val()

Breuer answered 29/11, 2012 at 7:9 Comment(0)

Recommended topics

Hot tags