How to pass value from <asp:textbox> to javascript function

Question

I am trying to call a javascript function from <asp:textbox> . My javascript function needs to add value from two <asp:textbox> , add them and then pass the value to another <asp:textbox> . My javascript function is as follows

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

My <textbox> is as follows

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

Upon running, my console shows the value of total as NaN. How do I solve this one?

Answer 1

Here is the complete code

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 2

change value() to val() :

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

Answer 3

Usually ASP change the ID attribute for each elements which have runat="server" attribute.

So you need other attribute for selecting them, eg. class .

Try this code:

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 4

Try with parsing value in float like below code.

  parseFloat("10");

Now multiply both value, also check your id get changed or not in browser doing inspect element.