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?

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?

• javascript
• jquery
• asp

• do you use jquery? so why no jquery tag there? – Fadhly Permata Commented Sep 23, 2016 at 10:32
• 1 i added the jquery tag :) – Bibek Aryal Commented Sep 23, 2016 at 10:33

4 Answers 4

Here is the plete 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>

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" />

change value() to val() :

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

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.