使用jQuery 实现3文本框修改数字后无刷新运算显示新结果

Question

<ul>
  <li><label>数据1：</label><asp:TextBox ID="TxtNum1" runat="server"></asp:TextBox></li>
  <li><label>数据2：</label><asp:TextBox ID="TxtNum2" runat="server"></asp:TextBox></li>
  <li><label>数据3：</label><asp:TextBox ID="TxtNum3" runat="server"></asp:TextBox></li>
  </ul>
  <p>数据1*数据2*数据3相乘结果是：<asp:Literal ID="litresult" runat="server"></asp:Literal></p>刚接触jQuery,一点头绪都没有 实现这个功能
希望高手给点代码提示

Answer 1

<script type="text/javascript">
$(document).ready(function() {     
     window.setInterval("ajaxStatusRequest();",1000);
    });  
 function ajaxStatusRequest(){
    var i1 = $('#TxtNum1').val();
    var i2 = $('#TxtNum2').val();
    var i3 = $('#TxtNum3').val();
    if(i1 != null && i2 != null&& i3 != null){
          $('#TextBox6').val(i1*1+i2*1+i3*1);
          $('#litresult').val(i1*1+i2*1+i3*1);
     }
     else
     {
       alert("数据有为空");
     }
} 
</script>
$('#litresult').val(i1*1+i2*1+i3*1);这句为什么不能显示结果？换成textbox显示结果的话，正确

Answer 2

把里面的Literal换成Label吧，这样有勾子方便一些。
function Multi(arg1,arg2,arg3){
  return arg1 * arg2 * arg3;
}
$(':text').onchange(function(){
   var arrArgs=[];
   $(':text').each(function(){     
     arrArgs.push(parseInt($(this).val()));
   });
   var result=Multi(arrArgs[0],arrArgs[1],arrArgs[2]);
   $('#litresult').html(result);
});

Answer 3

可以了　
这个结果如果要返回到asp.net的cs页面后台中，应该怎么处理？

Answer 4

default.aspx
<form id="form1" runat="server">
    <ul>
        <li>
            <label>
                数据1：</label><asp:TextBox ID="TxtNum1" runat="server"></asp:TextBox></li>
        <li>
            <label>
                数据2：</label><asp:TextBox ID="TxtNum2" runat="server"></asp:TextBox></li>
        <li>
            <label>
                数据3：</label><asp:TextBox ID="TxtNum3" runat="server"></asp:TextBox></li>
    </ul>
    <p>
        数据1*数据2*数据3相乘结果是：<asp:Label ID="Label1" runat="server" Text=""></asp:Label></p>
    <p>
        服务器返回结果：<asp:Label ID="Label2" runat="server" Text=""></asp:Label></p>
    <script>
        $(function () {
            var data = {};
            $("[id^=TxtNum]").each(function (index, obj) {
                $(obj).bind("blur", function () {
                    data[index] = $(this).val();
                    showResult();
                }).bind("keyup", function () {
                    var v = $(this).val();
                    $(this).val(v.replace(/[^\d\.]/g, ''));
                });
            });
            function showResult() {
                var r = 1;
                for (var i = 0; i < $("[id^=TxtNum]").length; i++) {
                    if (data[i]) {
                        r *= parseInt(data[i]);
                    }
                }
                $("#Label1").html(r);
                $.ajax({
                    type: "GET",
                    url: "Handler.ashx",
                    data: "r=" + r,
                    success: function (msg) {
                        $("#Label2").html(msg);
                    }
                });
            }
        });
    </script>
    </form>
Handler.ashx
<%@ WebHandler Language="C#" Class="Handler" %>using System;
using System.Web;public class Handler : IHttpHandler
{    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        string result = context.Request.QueryString["r"];
        context.Response.Write("服务器标识 " + result);
    }    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}
你不必返回cs的某个变量，你ajax提交数据后，只需要完成某个业务的调用，然后返回操作成功标识，前台做后续处理即可

Answer 5

关于文本框输入限制，你还可以考虑CTRL+V的操作

Answer 6

<ul>
  <li><label>数据1：</label><asp:TextBox ID="afds" runat="server" CssClass="inpbot1"></asp:TextBox></li>
  <li><label>数据2：</label><asp:TextBox ID="gvcx" runat="server" CssClass="inpbot1"></asp:TextBox></li>
  <li><label>数据3：</label><asp:TextBox ID="zdsd" runat="server" CssClass="inpbot1"></asp:TextBox></li>
  </ul>
  <p>数据1*数据2*数据3相乘结果是：<asp:Literal ID="litresult" runat="server"></asp:Literal></p>文本框是动态生成的,ID运行后会有变化,采用ID来取文本框的值不可以了,使用class应该怎么做?

Answer 7

会有很多个文本框吗，我那个取值方法是按照你id的规律来的，class的取值，是$(".className")