Jquery: Percentage Of Two Numbers

November 17, 2022 Post a Comment

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: $(docu

Solution 1:

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>

Solution 2:

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

Solution 3:

Check this fiddle

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

Baca Juga

Have made some corrections:

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

Solution 4:

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

Solution 5:

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>

Html5 Coding