[英]javascript add two textbox values and display in third in asp.net
How do I in javascript/asp add two textbox values and display in third? 我如何在javascript / asp中添加两个文本框值并显示在第三个?
My JS code 我的JS代码
function sum() {
var txtFirstNumberValue = document.getElementById('TextBox1').value;
var txtSecondNumberValue = document.getElementById('TextBox2').value;
var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('TextBox3').value = result;
}
}
ASP in page load 页面加载中的ASP
TextBox1.Attributes.Add("onkeyup", "sum();");
TextBox2.Attributes.Add("onkeyup", "sum();");
One thing you should know: 你应该知道一件事:
By default, ASP.NET uses auto-generated ClientID
property to be used by TextBox
control in ASPX pages, so that your textbox ID will become something like <input id="ctl00_ContentPlaceHolder1_TextBox1" type="text" ... />
after rendered. 默认情况下,ASP.NET使用自动生成的
ClientID
属性供ASPX页面中的TextBox
控件使用,以便您的文本框ID在呈现后变为类似<input id="ctl00_ContentPlaceHolder1_TextBox1" type="text" ... />
。 To use the server control name in client-side you need to use ClientID
like this: 要在客户端使用服务器控件名称,您需要使用
ClientID
如下所示:
function sum() {
var txtFirstNumberValue = document.getElementById('<%= TextBox1.ClientID %>').value;
var txtSecondNumberValue = document.getElementById('<%= TextBox2.ClientID %>').value;
var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('<%= TextBox3.ClientID %>').value = result;
}
}
An alternative to avoid using generated ClientID
in client-side is setting ClientIDMode
to be static, here are examples to use it: 避免在客户端使用生成的
ClientID
的另一种方法是将ClientIDMode
设置为静态,以下是使用它的示例:
<%-- control level --%>
<asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static" ... />
<%-- placeholder level --%>
<asp:Content ID="Content1" runat="server" ClientIDMode="Static" ...>...</asp:Content>
<%-- page level --%>
<%@ Page Language="C#" ClientIDMode="Static" AutoEventWireup="true" ... %>
Reference: 参考:
Set HTML Attributes for Controls in ASP.NET Web Pages 在ASP.NET网页中为控件设置HTML属性
You can use below code in aspx
without using code behind. 您可以在
aspx
使用以下代码,而无需使用代码。
<asp:textbox id="TextBox1" cssclass="sum" runat="server" />
<asp:textbox id="TextBox2" cssclass="sum" runat="server" />
<asp:textbox id="txtResult" runat="server" />
<script>
$(document).ready(function () {
//this calculates values automatically
calculateSum();
$(".sum").on("keydown keyup", function () {
calculateSum();
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".sum").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
$(this).css("background-color", "#FEFFB0");
}
else if (this.value.length != 0) {
$(this).css("background-color", "red");
}
});
$("#<%=this.txtResult.ClientID%>").val(sum.toFixed(2));
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.