Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery: percentage of two numbers

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>
like image 288
Sergiu Costas Avatar asked Nov 29 '12 07:11

Sergiu Costas


People also ask

How do I find the percentage of 2 numbers?

Answer: To find the percentage of a number between two numbers, divide one number with the other and then multiply the result by 100.

What is the percentage difference between two numbers?

Percentage Difference Formula The percentage difference between two values is calculated by dividing the absolute value of the difference between two numbers by the average of those two numbers. Multiplying the result by 100 will yield the solution in percent, rather than decimal form.

How to calculate percent in JavaScript?

Let’s start with an easy example. Take a look at the following JavaScript code: //Our number. var number = 120; //The percent that we want to get. //i.e. We want to get 50% of 120. var percentToGet = 50; //Calculate the percent. var percent = (percentToGet / 100) * number; //Alert it out for demonstration purposes.

What is a percentage in math?

In mathematics, a percentage is a number or ratio that represents a fraction of 100. It is often denoted by the symbol "%" or simply as "percent" or "pct.". For example, 35% is equivalent to the decimal 0.35, or the fraction 35 100 .

How do you find the percentage difference between two numbers?

Percentage Difference Formula. The percentage difference between two values is calculated by dividing the absolute value of the difference between two numbers by the average of those two numbers. Multiplying the result by 100 will yield the solution in percent, rather than decimal form. Refer to the equation below for clarification.

How do you calculate the percent of a decimal?

We then calculated the percent by multiplying that decimal number by the number that we want to get the percentage of. i.e. We multiplied 0.22 by 90, which is 19.8.


3 Answers

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>
like image 84
mattn Avatar answered Oct 22 '22 08:10

mattn


You have few problems,

  1. ? after closing parenthesis of text function.
  2. Repeated id price1 and price2 for both div and textboxes
  3. 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;
    });
});​
like image 39
Adil Avatar answered Oct 22 '22 07:10

Adil


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
like image 2
RohitWagh Avatar answered Oct 22 '22 08:10

RohitWagh