Propertychange And ajax call in jquery

Ajax on input change

propertychange event on input box

The onpropertychange event is fired in both (the direct and the indirect) cases. You can use the propertyName property of the event object in the event handlers for the onpropertychange event to get the name of the modified property
I want to detect whenever a textbox’s content has changed and execute some code that you need.
You want event fire changing text or value in input filed after 1 second, below code helpful.
Typing something on input box and stop type for 1 second then event fired, check this the code

var myTimeout;
$('input').bind('input propertychange', function() {    
    clearTimeout(myTimeout);
    myTimeout = setTimeout(function () {     
     console.log('test');
     // Ajax code here      
    },1000)
});

Propertychange And ajax call in jquery

Ajax call

Ajax in jQuery is used to perform an AJAX request to the server. Ajax stands for Asynchronous JavaScript and XML,
Asynchronous call is posting and loading partial data without loading the entire page again, success and error are callback functions, data is request parameters, url is request url, request type post and response return type JSON.

async :The request should be handled asynchronous or not. Default is true
beforeSend :A function to run before the request is sent
cache :The browser should cache the requested pages. Default is true
complete :A function to run when the request is finished after success and error functions
contentType :The content type used when sending data to the server. Default is: “application/x-www-form-urlencoded”
data :Specifies data to be sent to the server
dataType :The data type expected of the server response.
error :A function to run if the request fails.
success :A function to be run when the request succeeds
type :Define the type of request. GET or POST
url :Specifies the URL to send the request to. Default is the current page
timeout :The local timeout (in milliseconds) to the request
$.ajax({
  url: ajax_url,
  data: {param1: value1,param2:value2},
  type: 'post',
  dataType: 'json',
  success: function (data) {
console.log(data); // do something }, error: function (jqXHR, textStatus, errorThrown) { alert(jqXHR.status); } });

All above related to Propertychange And ajax call in jquery

Related:- See

ajax call on button click

$(document).ready(function(){
	$("#button_1").on("click", function(e) {
	    e.preventDefault();
	    $.ajax({type: "POST",
	        url: "/pages/test/",
	        data: { id: $(this).val(), token: $("#access_token").val() },
	        success:function(result) {
	          console.log(result);
	        },
	        error:function(result) {
	          console.log(result);
	        }
	    });
	});
});
Back To Top