I have a form like;

<form method="post" action="test.php">
 <input type="text" name="field1" class="class1"><span class="info">
 <input type="text" name="field2" class="class1"><span class="info">
 <input type="text" name="field3" class="class1"><span class="info">
</form>

I want to update the corresponding info span when user finish typing or when cursor goes out of form field. keypress() function + setTimeout + clearTimeout will work in the case of typing, but fails in the case of Ctrl+V, or some other method, where keypress is not relevant. The input data is passed into an ajax request like;

$.ajax({
  type: 'POST',
  url: 'ajaxhandler.php',
  data: 'item='+fieldvalue,//class1 values. field1 value, field2 value etc
  cache: false,
  success: function(result) {
    if(result == "true"){
      //update span with true
    }else{
      //update span with false
    }
  }
});

I am trying to achieve this. After user provide input to form field, it may pass to ajax and the corresponding info span may be updated with the ajax reply, either true or false. How can I do this?

I have a form like;

<form method="post" action="test.php">
 <input type="text" name="field1" class="class1"><span class="info">
 <input type="text" name="field2" class="class1"><span class="info">
 <input type="text" name="field3" class="class1"><span class="info">
</form>

I want to update the corresponding info span when user finish typing or when cursor goes out of form field. keypress() function + setTimeout + clearTimeout will work in the case of typing, but fails in the case of Ctrl+V, or some other method, where keypress is not relevant. The input data is passed into an ajax request like;

$.ajax({
  type: 'POST',
  url: 'ajaxhandler.php',
  data: 'item='+fieldvalue,//class1 values. field1 value, field2 value etc
  cache: false,
  success: function(result) {
    if(result == "true"){
      //update span with true
    }else{
      //update span with false
    }
  }
});

I am trying to achieve this. After user provide input to form field, it may pass to ajax and the corresponding info span may be updated with the ajax reply, either true or false. How can I do this?

• javascript
• jquery
• ajax
• forms

• 1 Use .focus(). api.jquery./focus – Shahlin Ibrahim Commented Dec 27, 2013 at 18:20
• 1 $('input').blur(function() { }); – Sergio Ramirez Commented Dec 27, 2013 at 18:23
• The change event does that. – adeneo Commented Dec 27, 2013 at 18:24

3 Answers 3

you could use the change event like so

http://jsfiddle/kasperfish/Zxn3Q/1/

$('input[type=text]').on('change', function(){
  var input=$(this);
  //do your ajax call here
  alert('this can be an ajax call');
  input.next('span.info').html(input.val());
});

I guess .focusout() is the one you want

The focusout event is sent to an element when it, or any element inside of it, loses focus.

you could use .blur() but blur event, it supports detecting the loss of focus on descendant elements

Focus, blur, & change are all viable event listeners for the purpose of updating the span when the user clicks outside of the input, but I don't think this is enough to update it when they have "finished typing" especially if they used auto-plete or Ctrl+V which may not constitute a keypress or keyup event.

Perhaps try setting up some throttling methods so every 100ms or so jQuery will check the val() of the form at that moment and update if anything is different from the last check.