Member 12824529 Ответов: 2

Почему текстовые назначения текстовым полям в jquery не выполняются?

У меня есть готовая функция jQuery, которая пытается назначить текст трем ASP.NET текстовые поля из элементов localStorage. LocalStorage не является проблемой, так как окно предупреждения в функции Ready показывает текст для хранения, но показывает пустое поле для текстового поля. Мне нужно иметь возможность читать эти текстовые поля из кода за щелчком кнопки; но прежде чем я смогу это сделать, мне сначала нужно получить текст, который будет успешно назначен и отображен в текстовых полях.

Элементы localStorage успешно предоставляют текст, но после трех назначений текстовым полям (см. ниже) в поле предупреждения отображается только текст для элементов localStorage, но "неопределенный" для внутреннего текста текстового поля.

Что я уже пробовал:

Код ASPX

<!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>

Peter_in_2780

Если АСП:текстовое поле переводится в HTML-элемент ввода, содержимое доступно в качестве .значение, не .через свойство innerText. Ваше предупреждение дает вам ключ к разгадке - внутренний текст не определен, а не нулевая строка.

2 Ответов

Рейтинг:
2

Richard Deeming

Как Питер упомянул в комментариях, для Ан <input> вам нужно установить .value не .innerText.

Поскольку вы используете jQuery, вы не сможете установить свойство непосредственно на объекте jQuery. Вы можете использовать jQuery val метод вместо этого:

$("#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() | документация по API jQuery[^]

В этом случае было бы достаточно просто использовать необработанный Javascript вместо jQuery:
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);

Member 12824529

Спасибо, Ричард. Я скопировал и вставил ваш Javascript-код, и он отлично работал. Он не только заполнял текстовые поля при загрузке страницы, но и значения были доступны в коде позади них. Я перепробовал так много конфигураций, и в некоторых случаях мне удавалось заполнить текстовые поля, но я никогда не мог получить доступ к значениям в коде позади них. Спасибо.

Рейтинг:
10

Sandeep Mewara

Учитывая, что код JavaScript находится на той же веб-странице ASP, в качестве примера следует привести следующее:

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

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


С элементами управления, имеющими runat=server, вам нужно получить фактический идентификатор элемента управления, чтобы получить к нему доступ. Если вы просматриваете источник страницы вашей веб-страницы, вы можете увидеть, что идентификатор вашего элемента управления textbox не просто txtPlaceId

Member 12824529

Спасибо, Сандип. Я попробовал ваш метод, но, к сожалению, он не заполнял текстовые поля. Я также попытался изменить внутренний текст на значение, но это все равно не сработало. Но я ценю твою помощь. Спасибо.

Sandeep Mewara

$("#<%=txtPlaceId.Идентификатора ClientID%и GT;").значение = объект localStorage.метод getitem("Map_PlaceId");
Это будет ценность, а не внутренний текст - попробуйте.

0x01AA

Я ненавижу пониженные голоса без комментариев, так что имейте компенсацию.

Sandeep Mewara

Спасибо! :)