jquery: percentage of two numbers

StackOverflow https://stackoverflow.com/questions/13620439

  •  03-12-2021
  •  | 
  •  

Domanda

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>
È stato utile?

Soluzione

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>

Altri suggerimenti

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;
    });
});​

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

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

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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top