Jquery: Percentage Of Two Numbers

January 30, 2024 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><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><scripttype="text/javascript">
$(function() {
  $("#price1, #price2").change(function() { // input on changevar result = parseFloat(parseInt($("#price1").val(), 10) * 100)/ parseInt($("#price2").val(), 10);
    $('#rate').val(result||''); //shows value in "#rate"
  })
});
</script></head><body><divid="price-div1"><label>price1</label><inputid="price1"type="text"></div><divid="price-div2"><label>price2</label><inputid="price2"type="text"></div><divid="rate-div"><label>rate</label><inputid="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/

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 htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><title>Untitled Document</title></head><scripttype="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><divclass="price1"><label><inputid="price1"type="text"></label></div><divclass="price2"><label><inputid="price2"type="text"></label></div><divclass="rate"><label><inputid="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()

<divid="price-div1"></label>price1<label><inputid="price1"type="text"></div><divid="price-div2"></label>price2<label><inputid="price2"type="text"></div><divid="rate-div"><label>rate</label><inputid="rate"type="text">%</div><scripttype="text/javascript">
        $(function() {
            $("#price1, #price2").change(function() {
                var result = parseFloat(parseFloat($("#price1").val(), 10) * 100)/ parseFloat($("#price2").val(), 10);
                $('#rate').val(result||'');
            })
        });
    </script>

Html5 Developer