当使用文本输入字段时,会显示Javascript中的NaN
NaN in Javascript showing up when using a text input field
我正在尝试使用一个简单的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>
试试这个:
$(function () {
$('.DoPricing').on("keyup",function () {
var total = 0;
$('.DoPricing').each(function () {
total += parseFloat($(this).val()) || 0;
});
$('#TotalPrice').html('$' + total);
});
});
这现在接受小数,这里是演示
您的基本示例适用于我。我猜页面上还有其他带有class的元素,但它们不一定有值,并且您希望它们默认为零。当输入没有值时,.val()
返回空字符串,parseInt('', 10)
返回NaN
,而不是0
,因此您无法得到所需内容。
这是非常简单的修复:
total += parseInt($(this).val()) || 0;
演示:http://jsfiddle.net/mattball/2rgku
我想你也想要小数,但你使用的是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>
相关文章:
- 如果函数返回True,则显示Javascript按钮
- 背景图像前显示Javascript警报
- 为我的rails应用程序显示javascript弹出消息
- 如何在Javascript中显示Javascript变量
- 如何在colorbox中显示JavaScript变量
- Xamarin iOS WKWebView显示JavaScript警报
- GoogleMapsV3api只显示Javascript循环中的一些标记
- 如何在Asp.net标签控件中显示Javascript函数值
- 如何在对话框中显示javascript变量
- 在asp.net页面中显示javascript执行过程中的加载图标
- 在html中显示javascript变量won'不起作用
- 如何使用按钮在对话框上显示 Javascript 函数的结果
- 打开新窗口进行打印时不显示 JavaScript 图像
- 显示javascript控制台中的消息
- 在加载html网页时显示JavaScript表
- 在Notepad++中更好地突出显示Javascript语法
- 通过php显示javascript内容
- 文本字段未显示javascript函数中的变量
- 显示Javascript表单验证消息
- VB.NET-WebBrowser没有't在html源代码中显示javascript创建的html元素