JS不更新文本框

JS not updating Textbox

本文关键字：文本 更新 JS      更新时间：2023-09-26

我在aspx文件中嵌入了以下JS。目的是在"TextBoxAirportPkup"框中获取航班标识，调用"FlightAware"，并在"TextBoxAirportName"文本框中写入目的地机场。

<div class="rows">
    <div class="inputbtnholder">
        <script type="text/javascript">
           var fxml_url = ....
           $(document).ready(function () {
                $('#FlightPickupBtn').click(function () {
                    $.ajax({
                    type: 'GET',
                    url: fxml_url + 'FlightInfoEx',
                    data: { 'ident': $('#TextBoxAirportPkup').val(), 'howMany': 1, 'offset': 0 },
                    success: function (result) {
                        var flight = result.FlightInfoExResult.flights[0];
                    $('#TextBoxAirportName').html(flight.origin);
                },
                 error: function(data, text) { alert('Failed to fetch flight: ' + data); },
                 dataType: 'jsonp',
                 jsonp: 'jsonp_callback',
                 xhrFields: { withCredentials: true }
             });
         });
     });
     </script>
     <asp:TextBox class="input1" ID="TextBoxAirportPkup" placeholder="Enter Flight Number" runat="server"></asp:TextBox>
     <div id="FlightPickupBtn" class="imgbtn searchbtn"></div>
 </div>
</div>
<div class="rows">
   <div class="inputbtnholder">
      <asp:TextBox class="input1 " ID="TextBoxAirportName" placeholder="Airport" runat="server" />
      <div id="airport_search" class="imgbtn searchbtn"></div> 
   </div>

我可以在Chrome DevTools中使用JS调试器逐步完成该过程。不会引发任何错误，但文本框不会更新。 我怀疑调用 $（'#TextBoxAirportName'）.html（flight.origin） 时存在语法错误，但 JS 不是我的强项。任何人都可以识别错误吗？

jQuery .html(aValue)设置元素的 HTML（它不会对输入字段执行任何操作）。您可能需要设置输入的值：

$("#TextBoxAirportName").val(flight.origin)

使用 ASP.NET，当项目运行时，控件的 ID 将更改为唯一。如果您希望使用 Javascript 以 ASP 控件为目标，则有三个选项：

选项一

为每个文本框创建一个唯一的类标识符：

<asp:TextBox class="input1 txt-airport-pkup" ID="TextBoxAirportPkup" placeholder="Enter Flight Number" runat="server"></asp:TextBox> <%-- Use 'txt-airport-pkup' in your jQuery --%>

但是，此选项违背了类的目的。或者（和推荐），您可以执行以下操作：

备选方案二

通过ClientID使用文本框控件的 ID 

$('#<%=FlightPickupBtn.ClientID%>').click(function () {
   (...)
}

备选方案三

如大卫哈蒙德提供，您也可以选择ID，如下所示：

$("[id$='FlightPickupBtn']").click(function () {
   (...)
}
相关文章：