JavaScript: How to get value of sender input element from keyup event?

Question

I need to capture the keyup event to provide live validation when user is typing in an input (change event fires only when the input loses focus).

I am having trouble getting the edited value of the input that fired the evnt.

The code also runs on timer to prevent multiple calls when user is typing (fires only every 500 ms).

I have several inputs with class "priceinput" and attach to keyup event of each like the following:

<script language="javascript" type="text/javascript">
    var timer;
    $(document).ready(function() 
    {
        $(".priceinput").each(function() 
        {
            $(this).keyup(function(e) 
            { 
                clearTimeout(timer);
                timer = setTimeout(function() 
                {     
                //how to get the value of the input element that was changed?  
                var value = ???;
                    $.getJSON('/Validator/IsValidInput', { input: value },
                    function(response) 
                    {
                      //indicate if input is correct
                    });
                }, 500);
            });
        });
     });
</script>

To get the sender input value, I have tried $(this).val, this.val(), e.target.val() but none seem to work.

How do I get the value of the sender input?

Answer 1

The problem is that in your timeout function, you've lost the "this" reference to the input element. Try something like this:

$('.priceinput').keyup(function(e) {
  var $input = $(this);
  clearTimeout(timer);
  timer = setTimeout(function() { 
    var value = $input.val();
    $.getJSON( ... );
  }, 500);
});