HTML Input field value set by AJAX and catch that event

Question

I have field in my html, and some third-party service will set it's value.

How could I catch that event when the field value is changing?

<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="">

How could I catch the value change of this field, I've tried .change event also,

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

Do you mention any other user as third party? Or will you change your input by the help of a 3rd party API by sending an AJAX request to it? Or do you have a notification channel over that API and that channel will change it? Please specify it :) — Uğurcan Şengit, Nov 30 '15 at 09:40
No matter how obvious your code may be, it is still best practice to post your code with your question. We simply can't read minds. — Peter, Nov 30 '15 at 10:54
OK. I thought code may not necessary for this issue, I just have some input fields, and their values is set by Post Code Anywhere API, Yes it's AJAX based but we're not allowed to modify the AJAX request or the response. It's just set the values of those fields. I'll update the question with code. Thank you. — Jedi Dula, Nov 30 '15 at 14:04

score 0 · Answer 1 · answered Nov 30 '15 at 09:38

0

Use change event.

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

answered Nov 30 '15 at 09:38

void

36,090
8
62
107

Aakash Chandrakant Aware · Answer 2 · 2015-11-30T10:36:45.240

<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);
     }
 });
}

No we can not modify the AJAX Post that 3rd party plugin handle those. — Jedi Dula, Nov 30 '15 at 14:09

score 0 · Answer 3 · answered Nov 30 '15 at 10:45

Please specify which control your using in your code. You Can use change or keydown Event.

FOr Client Control

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

For Server Control

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

The value is set by Ajax call. – Jedi Dula Nov 30 '15 at 14:11 — Jedi Dula, Nov 30 '15 at 14:11

score 0 · Answer 4 · answered Nov 30 '15 at 10:50

We are going to retrieve a value and set that value in an HTML form. First, let's create the form.

Form

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

Now that we have a form, we will do the technical part using javascript and 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);
            }
        });
    });
});

That's all

We cannot modify the ajax call, it's handled by the plugin. – Jedi Dula Nov 30 '15 at 14:10 — Jedi Dula, Nov 30 '15 at 14:10

score 0 · Accepted Answer · answered Dec 04 '15 at 08:45

I think I found some solution, I'm going to use a timer here, there will be some permanence issues.. but I couldn't find anything be

$('#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);
    });
});

HTML Input field value set by AJAX and catch that event

5 Answers5

Form

Javascript/jQuery