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
– 9Deuce, Commented Jun 29, 2015 at 20:58
Does the decimal point of the currency value match your langauge settings ? — collapsar
– collapsar, Commented Jun 29, 2015 at 21:00
hey do you really need keyup? it's acting funny with keyevents! — Sudhansu Choudhary
– Sudhansu Choudhary, Commented Jun 29, 2015 at 21:28

Cymen · Accepted Answer · 2015-06-29 21:40:38Z

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, 2015 at 21:40

answered Jun 29, 2015 at 21:09

Cymen

14.5k4 gold badges58 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

oliverbj Over a year ago

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.

Community · Accepted Answer · 2017-05-23 12:30:03Z

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, 2017 at 12:30

CommunityBot

11 silver badge

answered Jun 29, 2015 at 21:01

blex

25.7k6 gold badges48 silver badges78 bronze badges

4 Comments

oliverbj Over a year ago

This gives me the result "infinity" (no matter what values I try)

blex Over a year ago

The snippet above works for me in Chrome. What browser are you using, @oliverbj ?

oliverbj Over a year ago

I suppose when I get infinity, it's because a division by zero is occuring. Although I am entering other values than zero

oliverbj Over a year ago

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

Ben Osborne · Accepted Answer · 2015-06-29 21:01:33Z

0

Change this line:

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

to

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

answered Jun 29, 2015 at 21:01

Ben Osborne

2684 silver badges18 bronze badges

2 Comments

Ben Osborne Over a year ago

You need to check if the value is undefined or nothing. By putting || this means "if empty then set to 0"

Cymen Over a year ago

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.

Sudhansu Choudhary · Accepted Answer · 2015-06-29 21:43:52Z

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

Collectives™ on Stack Overflow

jQuery - Simple divide two values

4 Answers 4

1 Comment

4 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

2 Comments

Comments

Linked

Related