Why do text assignments to textboxes in jquery fail?

Question

0.00/5 (No votes)

See more:

I have a jQuery Ready function that attempts to assign text to three ASP.NET text boxes from localStorage items. The localStorage is not an issue as the alert box in the Ready function shows the text for Storage, but shows blank for Textbox. I need to be able to read these textboxes from Code Behind in a button click; but before I can do that, I first need to get the text to successfully assign to and display in the textboxes.

The localStorage elements successfully supply text, but after the three assignments to text boxes (see below), the alert box only shows text for the localStorage elements, but 'undefined' for the innerText of the textboxe.

What I have tried:

ASPX Code

HTML

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAZHGyzDFOABVoZPqxvLEpCrDTRiB8eymU">
    </script>
    <script>
        $(document).ready(function () {
            $("#txtPlaceId").innerText = localStorage.getItem("Map_PlaceId");
            $("#txtPlaceName").innerText = localStorage.getItem("Map_PlaceName");
            $("#txtPlaceAddress").innerText = localStorage.getItem("Map_PlaceVicinity");
            alert("Storage: " + localStorage.getItem("Map_PlaceId") + "\n" +
                  "Textbox: " + $("#txtPlaceId").innerText);
        });
    </script>

    <style>
        html, body, #map {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <br />
    <form id="form1" runat="server">
        <div>
            <table class="style1">
                <tr>
                    <td>Place ID:</td>
                    <td>
                        <asp:TextBox ID="txtPlaceId" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>Place Name:</td>
                    <td>
                        <asp:TextBox ID="txtPlaceName" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>Place Address:</td>
                    <td>
                        <asp:TextBox ID="txtPlaceAddress" runat="server"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </div>
        <table>
            <tr>
                <td>
                    <asp:Button ID="btnSend" runat="server" Text="Submit" OnClick="btnSend_Click" />
                </td>
                <td>
                    <asp:Button ID="btnAbort" runat="server" Text="Cancel" OnClick="btnAbort_Click" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Posted 18-Jul-20 13:21pm

Member 12824529

Updated 20-Jul-20 1:25am

Patrice T

v4

Add a Solution

Comments

Peter_in_2780 18-Jul-20 21:51pm

If asp:TextBox translates to an html input item, then the content is accessed as .value, not .innerText. Your alert give you the clue - innerText is UNDEFINED, not a null string.

2 solutions

Solution 2

As Peter mentioned in the comments, for an <input> you need to set the .value, not the .innerText.

Since you're using jQuery, you won't be able to set the property directly on the jQuery object. You can use jQuery's val method instead:

JavaScript

$("#txtPlaceId").val(localStorage.getItem("Map_PlaceId"));
$("#txtPlaceName").val(localStorage.getItem("Map_PlaceName"));
$("#txtPlaceAddress").val(localStorage.getItem("Map_PlaceVicinity"));
alert("Storage: " + localStorage.getItem("Map_PlaceId") + "\n" +
      "Textbox: " + $("#txtPlaceId").val());

.val() | jQuery API Documentation[^]

In this case, it would be simple enough to use raw Javascript instead of jQuery:

JavaScript

document.getElementById("txtPlaceId").value = localStorage.getItem("Map_PlaceId");
document.getElementById("txtPlaceName").value = localStorage.getItem("Map_PlaceName");
document.getElementById("txtPlaceAddress").value = localStorage.getItem("Map_PlaceVicinity");
alert("Storage: " + localStorage.getItem("Map_PlaceId") + "\n" +
      "Textbox: " + document.getElementById("txtPlaceId").value);

Posted 20-Jul-20 1:18am

Richard Deeming

Comments

Member 12824529 25-Jul-20 1:33am

Thank you Richard. I copied and pasted your Javascript code and it worked perfectly. It not only populated the textboxes in page load, but the values were available in the code behind. I've tried so many configurations, and in some cases was able to populate the textboxes, but could never access the values in the code behind. Thank you.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sandeep Mewara · Accepted Answer · 2020-07-18T23:49:00

Solution 1

Given the JavaScript code is in the same ASP webpage, following should work out as an example:

~~$("#<%=txtPlaceId.ClientID%>").innerText = localStorage.getItem("Map_PlaceId");~~

$("#<%=txtPlaceId.ClientID%>").value = localStorage.getItem("Map_PlaceId");

With controls having runat=server, you need to get the actual control ID to access it. If you view the page source of your webpage, you can see the ID of your textbox control is not just txtPlaceId

Posted 18-Jul-20 23:49pm

Sandeep Mewara

Updated 24-Jul-20 20:58pm

v2

Comments

Member 12824529 25-Jul-20 1:37am

Thank you Sandeep. I tried your method, but unfortunately it didn't populate the textboxes. I also tried changing innerText to value, and it still did not work. I appreciate your help though. Thanks.

Sandeep Mewara 25-Jul-20 2:57am

$("#<%=txtPlaceId.ClientID%>").value = localStorage.getItem("Map_PlaceId");
It would be value and not innerText - Try out.

[no name] 26-Jul-20 12:58pm

I hate down votes without a comment, so have a compensation.

Sandeep Mewara 26-Jul-20 13:39pm

Thanks! :)