由 AJAX 设置的 HTML 输入字段值并捕获该事件

Posted 2023-02-23

【中文标题】由 AJAX 设置的 HTML 输入字段值并捕获该事件

【英文标题】：HTML Input field value set by AJAX and catch that event

【发布时间】：2015-11-30 09:35:46

【问题描述】：

我的 html 中有字段，一些第三方服务会设置它的值。

如何在字段值发生变化时捕捉到该事件？

<input data-val="true" data-val-length="City cannot be longer than 30 characters." data-val-length-max="30" data-val-required="City is required." id="Address_City" maxlength="30" name="Address.City" type="text" value="">

我怎样才能捕捉到这个字段的值变化， 我也试过 .change 事件，

    $('#Address_City').on('change', function() 
      console.log("Changed");
);

【问题讨论】：

您是否提到任何其他用户为第三方？或者您会通过向第三方 API 发送 AJAX 请求来更改您的输入吗？或者你有一个关于那个 API 的通知通道并且那个通道会改变它？请指定它:)

无论您的代码多么明显，最好还是将代码与您的问题一起发布。我们根本无法读心。

好的。我认为这个问题可能不需要代码，我只有一些输入字段，它们的值由 Post Code Anywhere API 设置，是的，它基于 AJAX，但我们不允许修改 AJAX 请求或响应。它只是设置这些字段的值。我将用代码更新问题。谢谢。

@Jai 你是什么意思..？

【参考方案1】：

使用change 事件。

$("#myTextBox").on("change", function() 
   //alert($(this).val()); 
);

【参考方案2】：

<select name="user_id" id="user_id" class="form-control" onchange=get_contact(this.value)> 
<option value="1">1</option> 
<option value="2">2</option> 
 <option value="3">3</option> 
</select>
 <input type="text" class="form-control"  name = "contact_mob" id="contact_mob" placeholder="Contact Number" value="" />
 function get_contact(user_id) 
 $.ajax(
     type: "POST",
     url: "search.php",
     data: 
         "user_id": user_id
     ,
     dataType:'json',
     success: function(data) 
      // console.log(data.user_mobile); 
         $("#contact_mob").val(data.user_mobile);
         // $("#replaceThis").append(responseData);
     
 );

【讨论】：

不，我们不能修改由 3rd 方插件处理的 AJAX 帖子。

【参考方案3】：

请指定您在代码中使用的控件。 您可以使用 change 或 keydown 事件。

对于客户端控制

    $("#TextBOXID").bind("keydown", function() 
                      if($("#TextBOXID")[0].value!="" && $("#TextBOXID")[0].value.length>0)
         
        );

用于服务器控制

   $("#<%=TextBOXID.ClientID%>").bind("keydown", function() 
           if($("#TextBOXID")[0].value!="" && $("#TextBOXID")[0].value.length>0)
           
        );

【讨论】：

该值由Ajax调用设置。

【参考方案4】：

我们将检索一个值并在 HTML 表单中设置该值。首先，让我们创建表单。

表格

<form method="POST" action="">
    <select name="user_id" id="user_id" class="form-control">
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
    </select>
    <input type="text" class="form-control"  name = "contact_mob" id="contact_mob" placeholder="Contact Number" value="" />
</form>

现在我们有了一个表单，我们将使用 javascript 和 jQuery 来完成技术部分

Javascript/jQuery

// Wait for the dom to load before we start doing stuff
$(document).ready(function ($) 
    // append value to input on change of the dropdown
    $(document).on('change', '#user_id' , function () 
        // Get selected value
        var user_id = $(this).val();
        $.ajax(
             type: "POST", // Set ajax call type
             url: "search.php", // Set url
             data: "user_id": user_id, // Set an array of data
             dataType:'json', // Set the data type
             success: function(data) 
                // Log response to console
                console.log(data);
                // Append data to input
                $("#contact_mob").val(data.user_mobile);
            
        );
    );
);

就是这样

【讨论】：

无法修改ajax调用，由插件处理。

【参考方案5】：

我想我找到了一些解决方案，我将在这里使用计时器，会有一些持久性问题..但我找不到任何东西

$('#Address_Address').on('change keyup paste click', function () 
    $('.pcaautocomplete .pcaselected').click(function () 
        var refreshInterval = setInterval(function () 
            if ($('#State').val() != "") 
                var statusVal = $('#State').val();
                clearInterval(refreshInterval);
            
        , 100);
    );
);