楠的Javascript顯示了使用文本輸入字段

我嘗試使用旨在用單一數字的選擇下拉使用JavaScript的一個簡單的功能時，但現在我需要用它來當遊客輸入一個帶有小數點的值。即使在輸入30或任何數字時，我也會獲得當前JavaScript的NaN。有關如何獲得我的總數的任何建議？楠的Javascript顯示了使用文本輸入字段

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>

來源

2013-06-25 Phil Mulkins

製作小提琴，以獲得更多的反應...！ –

您是否有多個輸入框和一個dopricing類？ – HMR

使用'parseInt函數（）'你應該總是通過第二個參數的功能說明您正在使用的基地（您需要什麼'parseInt函數（$（本）.VAL（），10）'否則的08和I輸入如果你需要輸入十進制值，使用'parseFloat（）'而不是'parseInt（）'（注意''parseFloat（）''不帶底座的說法，它總是隻能以10爲基數又名十進制） –

試試這個：

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

這現在接受小數，這裏是demo

來源

2013-06-25 04:45:03 isJustMe

這很棒！謝謝！ –

沒問題！很高興它是有幫助的！ – isJustMe

Your basic example works for me.我猜there are other elements on the page with class, but that don't necessarily have values，以及您希望他們默認爲零。當輸入沒有價值，.val()返回空字符串，並parseInt('', 10)回報NaN，不0，所以你沒有得到你想要的東西。

這是非常簡單的修復：

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

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

來源

2013-06-25 03:31:05

這工作得很好，但它不支持小數點。有沒有辦法讓它支持小數？ –

使用'parseFloat'而不是'parseInt'。 –

我想你想的小數位很好，但你正在使用的不是parseFloat parseInt函數，如果你正在使用小數（因爲這是錢），那麼你應該使用toFixed。在下面的代碼中，我假設用戶將使用。作爲小數點符號，應該只有一個。在值（沒有千分機）。

在你的每次轉換一個完美的使用這一個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-25 04:11:47 HMR

我做什麼小數點但是這個代碼不能正常工作。有什麼我失蹤？我複製了javascript函數。 –

你可以按下F12並查看控制檯，firefox和chome都會告訴你一些有用的信息，我的猜測是代碼中的jQuery引用實際上並不指向jQuery庫。 – HMR

你必須有？ –

楠的Javascript顯示了使用文本輸入字段

回答

相關問題