CODEWITHSUNDEEP
javascriptjquery
oliverbj
oliverbj

Reputation: 6052

jQuery - Simple divide two values

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?

Upvotes: 4

Views: 9416

Answers (4)

Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

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

Upvotes: 0

Cymen
Cymen

Reputation: 14419

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

Upvotes: 3

blex
blex

Reputation: 25634

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>

Upvotes: 1

Ben Osborne
Ben Osborne

Reputation: 268

Change this line:

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

to

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

Upvotes: 0

Related Questions