使用Javascript从Textbox live计算总计 [英] Calculating Total from Textbox live using Javascript
本文介绍了使用Javascript从Textbox live计算总计的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发一个脚本，每当用户在所选文本框中输入值时，该脚本应该基本上更新表单的总成本。我的问题是我不知道为什么即使在通话后它也没有更新。我知道我在某个地方犯了一个错误，我不知道在哪里。
I am working on a script that should essentially be updating the total costs of a form everytime the user enters a value in selected textboxes. My problem is I am not sure why it is not updating even after calls. I know I made a mistake somewhere I am just not sure where yet.
$(document).ready(function () {
var total = document.getElementById(txtTotalCost);
ComputeCosts();
total.blur(function () {
ComputeCosts();
});
}）;
function ComputeCosts()
{
var amount1 = document.getElementById(txtPAmount1);
var amount2 = document.getElementById(txtPAmount2);
var amount3 = document.getElementById(txtPAmount3);
var amount4 = document.getElementById(txtPAmount4);
var amount5 = document.getElementById(txtPAmount5);
var totalBox = document.getElementById("txtTotalCost");
var totalGift = (txtPAmount1.val() +txtPAmount2.val() + txtPAmount3.val()+txtPAmount4.val()+txtPAmount5.val()).toFixed(2);
totalBox.val(totalGift);
}
以下是html方面：
<asp:TextBox runat="server" ID="txtPAmount1" CssClass="narrow" onClick="ComputeCosts();" text="0.00" />
<asp:TextBox runat="server" ID="txtPAmount2" CssClass="narrow" onClick="ComputeCosts();" text="0.00" />
<asp:TextBox runat="server" ID="txtPAmount3" CssClass="narrow" onClick="ComputeCosts();" text="0.00" />
<asp:TextBox runat="server" ID="txtPAmount4" CssClass="narrow" onClick="ComputeCosts();" text="0.00" />
<asp:TextBox runat="server" ID="txtTotalCost" CssClass="narrow" onClick="ComputeCosts();" text="0.00" />
推荐答案
服务器控件需要设置为 ClientIDMode =Static或使用<％=％> 从客户端访问。
Server controls need to be set as ClientIDMode="Static" or use <%= %> to access from client side.
您还希望将字符串转换为浮点数来计算总数。
You also want to convert string to float to calculate the total.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TextBoxDemo.aspx.cs"
Inherits="WebApplication2012.TextBoxDemo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="/Scripts/jquery-1.9.1.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox runat="server" ID="txtPAmount1" CssClass="narrow"
onClick="ComputeCosts();" Text="0.00" ClientIDMode="Static" />
<asp:TextBox runat="server" ID="txtPAmount2" CssClass="narrow"
onClick="ComputeCosts();" Text="0.00" ClientIDMode="Static"/>
<asp:TextBox runat="server" ID="txtPAmount3" CssClass="narrow"
onClick="ComputeCosts();" Text="0.00" ClientIDMode="Static"/>
<asp:TextBox runat="server" ID="txtPAmount4" CssClass="narrow"
onClick="ComputeCosts();" Text="0.00" ClientIDMode="Static"/>
<asp:TextBox runat="server" ID="txtPAmount5" CssClass="narrow"
onClick="ComputeCosts();" Text="0.00" ClientIDMode="Static"/>
<asp:TextBox runat="server" ID="txtTotalCost" CssClass="narrow"
onClick="ComputeCosts();" Text="0.00" ClientIDMode="Static"/>
<script>
$(document).ready(function () {
var total = $('#txtTotalCost');
ComputeCosts();
total.blur(function () {
ComputeCosts();
});
});
function ComputeCosts() {
var amount1 = parseFloat($('#txtPAmount1').val());
var amount2 = parseFloat($('#txtPAmount2').val());
var amount3 = parseFloat($('#txtPAmount3').val());
var amount4 = parseFloat($('#txtPAmount4').val());
var amount5 = parseFloat($('#txtPAmount5').val());
var totalGift = (amount1+ amount2 + amount3 + amount4 + amount5);
$('#txtTotalCost').val(totalGift);
}
</script>
</form>
</body>
</html>
这篇关于使用Javascript从Textbox live计算总计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
