Click here to Skip to main content
14,877,674 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
Updated 20-Jul-20 1:25am
v4
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.

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);
   
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.
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
   
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! :)

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900