jQuery storing the last input value and comparing against new

A function called "checkUsername" executes when I focusout of a input box with the id "regUsername"

$('#regUsername').focusout(function(){
    checkUsername();
});

The function:

function checkUsername(){
    var form_data = { username : $('#regUsername').val() };
    $.ajax({
        url: "/register/validateUsername",
        type: 'POST',
        data: form_data,
        success: function(msg) {
            var obj = $.parseJSON(msg);
        },
        error: function(data){
            dbdown();
        }
    });
}

Currently every time you focusout of the input box the ajax post function will run. This causes a slight flicker on returned validation box. I was wondering if it is possible to keep the last instance of the value which was passed in and 开发者_Python百科then compare it with the new value passed in. If they are the same then there would be no need for an ajax post.

Any help on this would be much appreciated :)

You can use HiddenField. Are you sure you want POST instead of GET?

Store it, if different call ajax and set new 'lastValue'

var lastValue = "";
function checkUsername(){
    var curr = $('#regUsername').val(),
        form_data = { username : curr };
    if (lastValue !== curr) {
      $.ajax({
        url: "/register/validateUsername",
        type: 'POST',
        data: form_data,
        success: function(msg) {
            var obj = $.parseJSON(msg);
        },
        error: function(data){
            dbdown();
        }
     });
     lastValue = curr;
   }
}

$('#regUsername').focusout(function(){
  var previousData = $(this).data("previousData");
  if(previousData && (!previousData.wasValid || previousData.user != $(this).val())){
    checkUsername();    
  }

});

function checkUsername(){
    var regUserName = $('#regUsername');
    var form_data = { username : regUserName.val() };
    $.ajax({
        url: "/register/validateUsername",
        type: 'POST',
        data: form_data,
        success: function(msg) {
            var obj = $.parseJSON(msg);


         var isvalid = false;
// put in your 'is valid' logic here
         if(obj){
               isvalid = true;
         }

            regUserName.data("previousData", {wasValid:isvalid , user: form_data.username});
        },
        error: function(data){
            dbdown();
        }
    });
}

In a similar case, I did the following:

In the on-ready function I included:

 $(":input").each(function(){$(this).data('oldVal',$(this).val());});

And defined a function as follows:

function valueChanged(field) {
    var oldVal=$("#"+field).data("oldVal");
    var newVal=$("#"+field).val();

    if (oldVal != newVal) return true;
    else return false;
} 

This gives a function which can be used for any input. Just put the following around your ajax call:

if  (valueChanged("regUsername")) {
    /* ajax call... */
}

EDIT: Added closing paren around if. Also, note that your ajax callback will need to update oldVal so you're chacking against the last value in the field, not the value when you loaded the page.