jQuery - Simple divide two values

Question

I am trying to get different values from my input fields, divide them and show the result like this:

<input type="text" class="ad-title calculate form-control" name="budget" id="budget" value="" placeholder="Enter a daily budget in USD">

<input type="text" class="form-control calculate" id="ppc" name="ppc" value="" placeholder="">

My simple jQuery:

$(document).ready(function() {    
    $(".calculate").bind("keyup change", function(e) {
         var budget = parseFloat($("#budget").val());
         var ppc = parseFloat($("#ppc").val());
         var value = ppc / budget;
        $("#sum").text(value);
    });
});

However, in my #sum div, all I see is: NaN

What am I doing wrong?

I see it's money, are you putting in dollar signs in the input? — 9Deuce, Jun 29 '15 at 20:58
Does the decimal point of the currency value match your langauge settings ? — collapsar, Jun 29 '15 at 21:00
hey do you really need keyup? it's acting funny with keyevents! — Sudhansu Choudhary, Jun 29 '15 at 21:28

Cymen · Accepted Answer · 2015-06-29T21:40:38.353

3

You could so this:

$(document).ready(function() {    
    $(".calculate").bind("keyup change", function(e) {
        var budget = parseFloat($("#budget").val()) || 0;
        var ppc = parseFloat($("#ppc").val()) || 0;

        var value = ppc / budget;

        if (!isNaN(value) && value !== Infinity) {
            $("#sum").text(value);
        }
    });
});

You may have to alter it to match your needs. For example, we'll get NaN or Not a Number when dividing by zero so handle that. Maybe you never want to show 0 so maybe handle that or make the default for budget 1. It depends on how you want it to work.

JSFiddle: http://jsfiddle.net/f0t45c7x/1

edited Jun 29 '15 at 21:40

answered Jun 29 '15 at 21:09

Cymen

14,079
4
52
72

this also gives me infinity. Seems like when I am editing my first .calculate field (the #budget one), it doesn't take/read that value. Why, I have no idea. I thought the .bind() function would take care of that. – oliverbj Jun 29 '15 at 21:12

score 1 · Answer 2 · edited May 23 '17 at 12:30

1

Convert your values to numbers using the + unary operator instead of using parseFloat :

$(document).ready(function () {
    $(".calculate").bind("keyup change", function (e) {
        var budget = +$("#budget").val();
        var ppc = +$("#ppc").val();
        if(!budget || !ppc) return false; // Wait till both values are set
        var value = ppc / budget;
        $("#sum").text(value);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" class="ad-title calculate form-control" name="budget" id="budget" value="" placeholder="Enter a daily budget in USD">
<input type="text" class="form-control calculate" id="ppc" name="ppc" value="" placeholder="">
<div id="sum"></div>

edited May 23 '17 at 12:30

Community

1
1

answered Jun 29 '15 at 21:01

blex

24,941
5
39
72

This gives me the result "infinity" (no matter what values I try) – oliverbj Jun 29 '15 at 21:03
The snippet above works for me in Chrome. What browser are you using, @oliverbj ? – blex Jun 29 '15 at 21:04
I suppose when I get infinity, it's because a division by zero is occuring. Although I am entering other values than zero – oliverbj Jun 29 '15 at 21:05
Now it doesn't show anything in the #sum. I can see that my original code doesn't update before the 2nd .calculate input is filled out (got me thinking that maybe it doesn't regonize any change to the first .calculate input – oliverbj Jun 29 '15 at 21:10

score 0 · Answer 3 · answered Jun 29 '15 at 21:01

0

Change this line:

var ppc = parseFloat($("#ppc").val());

to

var ppc = parseFloat($("#ppc").val()) || 0;

answered Jun 29 '15 at 21:01

Ben Osborne

218
4
15

You need to check if the value is undefined or nothing. By putting || this means "if empty then set to 0" – Ben Osborne Jun 29 '15 at 21:02
Actually, it's a logical or which means if the value on the left is logically false, it'll go with the value on the right. It may or may not have the behavior desired but it'll handle empty string, undefined and NaN. – Cymen Jun 29 '15 at 21:10
Thanks for the explanation – Ben Osborne Jun 29 '15 at 21:28

score 0 · Answer 4 · answered Jun 29 '15 at 21:43

You do not need to bind "change" event, this should do,

$(document).ready(function() {    
    $(".calculate").bind("keyup", function(e) {
        var budget = parseFloat($("#budget").val()) || 0;
        var ppc = parseFloat($("#ppc").val()) || 0;

        var value = (ppc / budget);
       // alert(value);
        if (!isNaN(value) && value != Infinity) {
            $("#sum").text(value);
        }
        else{
            $("#sum").text("0")
        }
    });
});

jQuery - Simple divide two values

4 Answers4