javascript - How to get value from a text field when user finish typing or goes out of textfield using jQuery? - Stack Overflow

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

Share Improve this question Follow edited Jun 1, 2018 at 9:59 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Dec 27, 2013 at 18:19 AlfredAlfred 21.4k6363 gold badges174174 silver badges257257 bronze badges 3

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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.