Post TextBox ( Input ) OnChange with AJAX

When the value of an input element changes, the returned value is sent to another input element using Ajax.


We have a form as shown below.


<form ...>
	<div class="col-12 col-md-6">
		<div class="form-group">
			<label>Customer ID</label>
			<input type="text" class="form-control" placeholder="Enter Customer ID" id="id" name="id">
		</div>
	</div>

	<div class="col-12 col-md-6">
		<div class="form-group">
			<label>Customer Name</label>
			<input type="text" class="form-control" placeholder="Customer Name" id="title" name="title">
		</div>
	</div>
</form>

Use $("#id").change() in the form. $("#id").change() posts the #id input element using AJAX.


In the following way, you can create a change method


<script type="text/javascript">
    $(document).ready(function () {
        $("#id").change(function () {
            var val1 = $("#id").val();
            $.ajax({
                type: "POST",
                url: "/Home/GetData/",
                data: { id: val1 },
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    $("#title").val(data);
                }
            });
        });
    });
</script>

What we want to happen is to send the value returned from the controller's JSONResult GetData() method to another input element.


First of all, the input element named "id" triggers the "change" event.


After this, the #id input element is sent to the controller's JSONResult GetData(int id) method.


It returns the customer name and the returned data is set to the #title input element.


[HttpPost]
public JsonResult GetData(int id)
{
    string title = "";
    if(id == 1)
		title = "Chris"

    return Json(title, JsonRequestBehavior.AllowGet);
}

The $("#title").val(data) method should be used to set the content of the #title input element.


Post-Ajax-Jquery-Change-1.PNG


Parse JSON ( Serializing an Object Structure )


<script type="text/javascript">
    $(document).ready(function () {

        $("#id").change(function () {
            var val1 = $("#id").val();
            $.ajax({
                type: "POST",
                url: "/Home/GetVKNAndUnvanByID/",
                data: { id: val1 },
                dataType: "json",
                success: function (data) {              
                    var objectFromString = JSON.parse(data);
                    $("#age").val(objectFromString.age);
                    $("#title").val(objectFromString.title);   
                }
            });
        });

    });
</script>

[HttpPost]
public JsonResult GetDataByID(int id)
{
    string title = "";
	string age = "";
    if (id == 1)
    {
		title = "Chris";
		age = "34";
	}

    var data = "{ \"age\":\"" + age + "\", \"title\":\"" + title + "\" }";
    return Json(data, JsonRequestBehavior.AllowGet);
}

tags : TextBox onchange event in ajax, $( # ).text() textbox, textbox onchange event in ajax post, $("#title").text, textbox change event ajax