Question 10855 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

.Net Textbox returns "undefined" value when trying to access from Javascript/jQuery

I’ve got this textbox which I’m trying to access in Javascript/jQuery:

<asp:Textbox ID="txtChosenTime" runat="server"></asp:Textbox>

I’ve tried a handful of variations on:

var TestVal = $("<%=txtChosenTime.ClientID%>");
console.info(TestVal.value);

Also for example:

var TestVal = $("<%=txtChosenTime.ClientID%>").value;
console.info(TestVal);

Or without the $

I’m getting undefined as the value, if not an error with some of the other variations.

Thank you for any help.

Tags:

2

Answers


  1. 0

    Assuming you have jQuery installed and working?

    To select a element by control "id", then you use the format

     $("#MyControl")

    Note the number "#" or so called pound sign.

    and to select by class, you just use

     $(".MyClass")

    so, in your case?

    say like this:

            <asp:Textbox ID="txtChosenTime" runat="server"></asp:Textbox>
        <br />
        <asp:Label ID="Label1" class="mycool" runat="server" Text="Label"></asp:Label>
        <br />
        <asp:Label ID="Label2" class="mycool" runat="server" Text="Label"></asp:Label>

        <br />
        <asp:Button ID="Button1" runat="server" Text="run my js code"
            OnClientClick="myjscode();return false;"
            />


        <script>

            function myjscode() {

                // select control by id
                $("#<%= txtChosenTime.ClientID %>").val("zoo text")

                alert("Text of text box = " + $("#<%= txtChosenTime.ClientID %>").val() )

                // select control by class
                $(".mycool").text("zoo text")

                alert("Text of label = " + $("#<%= Label1.ClientID %>").text() )

            }


        </script>

    Note that for:

    a asp.net text box, you use .val() (to get, or set). Don’t forget the "()"

    for a asp.net label, you use .text() (to get or set).

    So, I would probably have written the above as:

            <script>
            function myjscode() {

                // select control by id
                var txtTime = $("#<%= txtChosenTime.ClientID %>")
                txtTime.val("zoo text")
                alert("Text of text box = " + txtTime.val() )

                // select control by class
                $(".mycool").text("zoo text")

                alert("Text of label = " + $("#<%= Label1.ClientID %>").text() )
            }

        </script>

    So, when using jQuery, you use a "method" of that jQuery object, and that getter and setter is thus .val()

      .val() gets the value
  .val("some text here") sets the value of the text box.

    As noted, for a label, you use .text().

    And, I often since I am somewhat lazy?

    I often set the client id = "static", which means for the asp.net processing to NOT change the id of the control.

    So, I often do this:

            <asp:Textbox ID="txtChosenTime" runat="server" ClientIDMode="Static"></asp:Textbox>
        <br />

    And now my code becomes this:

                function myjscode() {

                // select control by id
                var txtTime = $("#txtChosenTime")
                txtTime.val("zoo text")
                alert("Text of text box = " + txtTime.val() )

    So, since you "often" has to use that "messy" server side expression to get the correct "id", then I often just as dropping in the text box (or label), add into the markup the clientidmode="static". As a result, then the jQuery code becomes quite a be more clean, and no <%= .ClientID %> expression is required.

    Also, note the 2nd code in which I set a value of a label. the VERY cool feature of jQuery is that you can select multiple elements, and then the .val()/.text() will apply to ALL of the elements you match on the page (and wild card selectors are allowed!!).

    So, I could have actually written the code this way:

            <asp:Textbox ID="Textbox1" runat="server" ClientIDMode="Static">

        </asp:Textbox>
        <br />
        <asp:Textbox ID="Textbox2" runat="server" ClientIDMode="Static">

        </asp:Textbox>
        <br />
        <asp:Textbox ID="Textbox3" runat="server" ClientIDMode="Static">

        </asp:Textbox>
        <br />



        <script>
            function myjscode() {

                // select control by id
                var txtTime = $("#Textbox1, #Textbox2, Textbox3 ")
                txtTime.val("zoo text")

    So, I set 3 text boxes in one shot!!!

    And as noted, wild cards are allowed, so I could do this:

            <asp:Textbox ID="Textbox1" runat="server" ClientIDMode="Static">

        </asp:Textbox>
        <br />
        <asp:Textbox ID="Textbox2" runat="server" ClientIDMode="Static">

        </asp:Textbox>
        <br />
        <asp:Textbox ID="Textbox3" runat="server" ClientIDMode="Static">

        </asp:Textbox>
        <br />



        <script>
            function myjscode() {

                // select control by id
                var txtTime = $('[id^=Textbox]')
                txtTime.val("zoo text")

    So, the jQuery selector not limited to "operating" against one control as a result of the jQuery selector.

    Login or Signup to reply.
  2. 0

    I see two issues.

    1. You’re trying to select by ID, but your selector omits the ID selector prefix, #
    2. You’re attempting to use .value on a jQuery object, rather than .val().

    Try this:

    const $txtChosenTime = $("#<%=txtChosenTime.ClientID%>");
console.info($txtChosenTime.val());

    Alternatively, if this element will not be repeated, you can avoid concerning yourself with server IDs entirely, and add ClientIdMode="static" to the element to preserve its assigned ID:

    <asp:Textbox ID="txtChosenTime" runat="server" ClientIdMode="static"></asp:Textbox>

    $("#txtChosenTime").val();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search