2

我正在尝试使用一个简单的 javascript 函数，该函数旨在与带个位数的 SELECT 下拉列表一起使用，但现在我需要在访问者输入带小数点的值时使用它。即使我输入 30 或任何数字，我也会使用当前的 javascript 获得 NaN。关于如何获得我的总数的任何建议？

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>
4

3 回答 3

5

试试这个：

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

现在接受小数，这里是演示

于 2013-06-25T04:45:03.497 回答
2

您的基本示例对我有用。我猜页面上还有其他带有 class 的元素，但不一定有 values，并且您希望它们默认为零。当输入没有值时，.val()返回空字符串，并parseInt('', 10)返回NaN, not 0，所以你没有得到你想要的。

这很容易解决：

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

演示：http: //jsfiddle.net/mattball/2rgku

于 2013-06-25T03:31:05.123 回答
0

我假设您也需要小数，但您使用的是 parseInt 而不是 parseFloat，如果您使用的是小数（因为它是钱），那么您应该使用 toFixed。在下面的代码中，我假设用户将使用 . 作为十进制符号，应该只有一个。在值中（没有千位分隔符）。

在你的 for each 中，你将一个非常好的可用 this 转换为一个 jQuery 对象，只是为了获取值。我已将 $(this).val() 更改为 this.value，因此不需要转换。

<!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>
于 2013-06-25T04:11:47.747 回答