NaN in Javascript showing up when using a text inp

2019-07-17 05:57发布

站内问答 / JavaScript
710 3 4

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>

3条回答
家丑人穷心不美
2楼-- · 2019-07-17 06:38

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

查看更多
0人赞 添加讨论(0) 举报
在下西门庆
3楼-- · 2019-07-17 06:47

I assume you want decimals as well but you're using parseInt instead of parseFloat and if you're using decimals (because it's money) then you should use toFixed. In the following code I assume the user will use the . as a decimal symbol and there should be only one . in the value (no thousands separator).

In your for each you convert a perfectly good usable this to a jQuery object only to get the value. I've changed $(this).val() to this.value so the conversion isn't needed.

<!DOCTYPE html>
<html>
 <head>
<title>test</title>
     <script type="text/javascript" src="jquery-1.9.0.js"></script>
</head> 
 <body> 
<form action="myactionpage.php" method="POST">
<table>
  <tr>
    <td>How much will you be paying this morning?</td>
    <td>$<input type="text" name="howmuch" id="howmuch" placeholder="0.00" class="DoPricing"></td>
  </tr>
  <tr>
    <td>How much will you be paying this evening?</td>
    <td>$<input type="text" name="howmuch" id="howmuch1" 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>

     <script type="text/javascript">
         (function () {
             function getValue(el) {
                 if (el.value === "") { return 0; }
                 var nr = parseFloat(el.value);
                 // only 0 to 9 or . and only one . used as decimal symbol
                 if (/[^0-9.]/.test(el.value) || /.*?\..*?\./.test(el.value)) {
                     return false;
                 }
                 return nr;
             }
             $('.DoPricing').on("keyup", null, null, function (e) {
                 var $this = $(this),
                 val = getValue(this),
                 total = 0;
                 if(val!==false){
                     $this.data("pref",val);
                 }else{
                     $this.val($this.data("pref")||"");
                 }
                 $('.DoPricing').each(function () {
                     total += parseFloat(this.value,10)||0;
                 });
                 $('#TotalPrice').html('$' + total.toFixed(2));
             });
         })();
     </script>
 </body>
</html>
查看更多
0人赞 添加讨论(0) 举报
淡お忘
4楼-- · 2019-07-17 06:53

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)