How can I catch a change event from an HTML text field when a user clicks on a link after editing?

Question

Our webapp has a form with fields and values that change depending on values entered. Each time there is a change event on one of the form elements, we use an expensive AJAX call to update other elements on the page.

This works great for selects, radio buttons and checkboxes. The issue comes in when a user adds content to a text field, and then clicks a link without taking the focus from the text field. The browser moves to a new page, and the contents of the text field are never saved. Is there an easy way to code around this? The AJAX call is too expensive to call with each key press.

Here's an example of my Prototype code at the moment:

$$('.productOption input.text').invoke('observe', 'change', saveChangeEvent);

Answer 1

Have you considered hooking into the window unload() event? Here is a c/p jQuery example using .unload().

$(window).unload(function() {
  var input = $("#MyInput");  // Text field to check for

  if(input.length > 0)
  {
     //Ajax call to save data, make sure async:false is set on ajax call.
  }
});

This lets you work around making a call on each key press, by making one if they leave the page.

Answer 2

using prototype, you can have a PeriodicExecuter listen while you're typing and sending off an ajax query when nothing has happened for e.g. 2 seconds and value has changed since the last AJAX request. Start the executor using a focus event and shut it down using a blur event, that way you only need one executor at a time