Question

I installed the Asp.net Ajax toolkit. In my site I use the NummericUpDown from that toolkit.
Now, I want that a label changes when the NummericUpDown Textboxes changes. I try to use JavaScript for this, but I always get the following error:

'ASP.orders_aspx' does not contain a definition for 'changeAmount' and no extension method 'changeAmount' accepting a first argument of type 'ASP.orders_aspx' could be found (are you missing a using directive or an assembly reference?)

This is my code:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="orders.aspx.cs" Inherits="orders" Title="the BookStore" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

    <script type="text/javascript">

        function changeAmount()
        {
            var amount = document.getElementById("txtCount");
            var total = 10 * amount.value;

            document.getElementById("lblPrice").value = total;
        }


    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />

    <h1 id="H1" runat="server">
        Bestellen</h1>

    <asp:Panel ID="pnlZoeken" runat="server" Visible="true">

        <asp:ObjectDataSource ID="objdsSelectedBooks" runat="server" OnSelecting="objdsSelectedBooks_Selecting"
            TypeName="DAL.BooksDAL"></asp:ObjectDataSource>
        <h3>
            Overzicht van het gekozen boek</h3>
        <asp:FormView ID="fvBestelBoek" runat="server" Width="650">
            <ItemTemplate>
                <h3>
                    Aantal boeken bestellen</h3>
                <table width="650">
                    <tr class="txtBox">
                        <td>
                            Boek
                        </td>
                        <td>
                            Prijs
                        </td>
                        <td>
                            Aantal
                        </td>
                        <td>
                            Korting
                        </td>
                        <td>
                            Totale Prijs
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <%# Eval("TITLE") %>
                        </td>
                        <td>
                            <asp:Label ID="lblPrice" runat="server" Text='<%# Eval("PRICE") %>' />
                        </td>
                        <td>
                            <asp:TextBox OnTextChanged="changeAmount()" ID="txtCount" runat="server"></asp:TextBox>
                            <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server" TargetControlID="txtCount"
                                Width="50" Minimum="1" ServiceDownMethod="" ServiceUpMethod="" />
                        </td>
                        <td>
                            -
                        </td>
                        <td>
                            <asp:Label ID="lblAmount" runat="server" />
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:FormView>

        <asp:Button ID="btnBestel" runat="server" CssClass="btn" Text="Bestel" OnClick="btnBestel_Click1" />
        <asp:Button ID="btnReChoose" runat="server" CssClass="btnDelete" Text="Kies een ander boek"
            OnClick="btnRechoose_Click" />
    </asp:Panel>
</asp:Content>

Does anyone know the answer?

Thanks a lot, Vincent

Answer 1

You’re trying to assign a client-side method to the OnTextChanged event, which is a server-side event.

Also, your javascript is referencing the server id of the label and textbox. The WinForms engine appends characters to this depending where the control is nested. Use <%=myControl.ClientID%> to get around this.

You need to use some pure Javascript for this:

 window.onload=function(){
     //assign client method to textbox
     document.getElementById('<%=txtCount.ClientID%>').onChange = function(){
        var amount = document.getElementById('<%=txtCount.ClientID%>');
        var total = 10 * amount.value;

        document.getElementById('<%=lblPrice.ClientID%>').value = total;

     }
  }

Place that on your page instead of your current Javascript and get rid of the OnTextChanged="changeAmount()" attribute.