NaN in Javascript showing up when using a text input field

javascript jquery html function input

11,175

Solution 1

Try this:

$(function () {
    $('.DoPricing').on("keyup",function () {
        var total = 0;
        $('.DoPricing').each(function () {
            total += parseFloat($(this).val()) || 0;
        });
        $('#TotalPrice').html('$' + total);
    });
});

This accepts decimals now, here is the demo

Solution 2

Your basic example works for me. I'm guessing there are other elements on the page with class, but that don't necessarily have values, and that you'd like them to default to zero. When an input has no value, .val() returns the empty string, and parseInt('', 10) returns NaN, not 0, so you're not getting what you want.

This is very simple to fix:

total += parseInt($(this).val()) || 0;

Demo: http://jsfiddle.net/mattball/2rgku

11,175

Author by

Phil Mulkins

Updated on June 14, 2022

Comments

Phil Mulkins almost 2 years

I am trying to use a simple function of javascript that was intended to be used with a SELECT dropdown with single digits, but now I need to use it for when visitors type in a value with decimal points. I am getting a NaN with the current javascript even when I type in 30 or any number. Any suggestions on how to get my total?

JAVASCRIPT:

$(function () {
    $('.DoPricing').change(function () {
        var total = 0;
        $('.DoPricing').each(function () {
            total += parseInt($(this).val());
        });
        $('#TotalPrice').html('$' + total);
    });
});

HTML:

<form action="myactionpage.php" method="POST">
<table>
  <tr>
    <td>How much will you be paying today?</td>
    <td>$<input type="text" name="howmuch" id="howmuch" placeholder="0.00" class="DoPricing"></td>
  </tr>
  <tr>
     <td><div class="totalbox">Total Amount Due Today: <strong><span id="TotalPrice">$0.00</span></strong></div>
     </td>
   </tr>
   <tr><td><input type="submit" id="submit" name="submit" value="Submit Payment" class="submitbut" /></td>
  </tr>
  </table>
 </form>

Phil Mulkins almost 11 years

I do what the decimal but this code isn't not working. Is there something I am missing? I copied the javascript function.
HMR almost 11 years

You can press F12 in the and check out the console both firefox and chome will tell you something useful, my guess is that the jQuery reference in the code doesn't actually point to the jQuery library.
Phil Mulkins almost 11 years

This works fine, but it doesn't support decimal points. Is there a way to make it support decimals?
Phil Mulkins almost 11 years

Do you have to have the <script type="text/javascript" src="jquery-1.9.0.js"></script>?
HMR almost 11 years

@PhilMulkins in your sample code you use $(... all over the place, where do think that comes from? These functions are not standard JavaScript functions but come from the jQuery library. Your code wouldn't do anything without adding the jquery library and so won't mine because I assume you're including it in your page.
Phil Mulkins almost 11 years

I already have this and it doesn't work: <script type="text/javascript" src="code.jquery.com/jquery-1.10.1.min.js"></script> (Doesn't show the http in the comment)
HMR almost 11 years

You're doing something wrong, maybe copied something wrong. If the page loads jquery from the jquery site it should work fine. <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Matt Ball almost 11 years

Use parseFloat instead of parseInt.