如何将值从<asp:textbox>传递给javascript函数

Question

我正在尝试从<asp:textbox>调用javascript函数。我的javascript函数需要将两个<asp:textbox>的值相加，将它们相加，然后将值传递给另一个<asp:textbox>。我的javascript函数如下

function getAmount() { 
    var total = $('#ItemRate').val() * $('#ItemQty').val();
    $('#ItemAmount').val(total);
}

我的<textbox>如下

<asp:TextBox runat="server" id="ItemRate" />
<asp:TextBox runat="server" id="ItemQty" onchange="javascript:getAmount()" />  
<asp:TextBox runat="server" id="ItemAmount" />

在运行时，我的控制台将total的值显示为NaN。我该如何解决这个问题呢？

Answer 1

通常，ASP会为每个具有runat="server"属性的元素更改ID属性。

所以你需要其他属性来选择它们，例如。class。

尝试以下代码：

function getAmount() { 
    var total = $('.ItemRate').val() * $('.ItemQty').val();
    $('#ItemAmount').val(total);
}

Html：

<asp:TextBox runat="server" class="ItemRate" id="ItemRate" />
<asp:TextBox runat="server" class="ItemQty" id="ItemQty" onchange="javascript:getAmount()" />  
<asp:TextBox runat="server" class="ItemAmount" id="ItemAmount" />

Answer 2

下面是完整的代码

Value1: <asp:TextBox ID="tbx1" runat="server"></asp:TextBox>
Value2: <asp:TextBox ID="tbx2" runat="server"></asp:TextBox>
<button onclick="Add()">Add</button><br />

Result:<asp:TextBox ID="tbx3" runat="server"></asp:TextBox>

<script type="text/javascript">

    function Add()
    {

        var x = document.getElementById('<%= tbx1.ClientID %>').value;
        var y = document.getElementById('<%= tbx2.ClientID %>').value;
     document.getElementById('<%= tbx3.ClientID %>').value=parseInt(x)+parseInt(y);
    }
</script>

Answer 3

将value()更改为val()：

function getAmount() { 
    var total = $('#ItemRate').val() * $('#ItemQty').val();
    $('#ItemAmount').val(total);
}