Home arrow JavaScript arrow Ajax Hack for Entering Information Without Refreshing Your Browser

Ajax Hack for Entering Information Without Refreshing Your Browser

Ajax improves the web experience by letting users interact with web sites more quickly and intuitively. With Ajax properly set up on a web site, a user can enter a comment and see it appear on the site without waiting for their browser to refresh. This article will explain how to accomplish this bit of online magic. It is excerpted from chapter 12 of the book Ajax Hacks, written by Bruce W. Perry (O'Reilly; ISBN: 0596101694). Copyright © 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 4 stars4 stars4 stars4 stars4 stars / 8
July 10, 2008
  1. · Ajax Hack for Entering Information Without Refreshing Your Browser
  2. · Web Forms
  3. · Event Handler Code
  4. · Get the First Serve In

print this article

Ajax Hack for Entering Information Without Refreshing Your Browser
(Page 1 of 4 )

Hack 12  Submit Text Field or textarea Values to the Server Without a Browser Refresh

Create a smooth transition between entering information into a textarea or text field and instantly transferring the data to the server.

Ajax applications can automatically send to a server program the information that the user has entered into a text field ortextarea. The application code waits for the text widget’sonblurevent to occur, then uses the request object to send just the data from that field ortextarea. In many applications, this technique is preferable to requiring the user to click a Submit button, then sending all of the form’s values to the server in a big clump. It is also much snappier in terms of the application’s responsiveness. For example, an online quiz or teaching application can fetch and display the correct answer to a question as soon as the user has moved away from the field, instead of requiring the user to click a button and refresh the page just to see specific answers. Real-time language translation is another possible application for this user-interface behavior.

The onblur event is triggered when a web form control such as a text field loses the keyboard focus, which is typically caused by the user pressing the Tab key or clicking outside of the field. You can also use the onkeypress, onkeydown, or onkeyup event handlers to respond to user interaction with a text widget.

Here is this hack’s sequence of events for sending text to the server:

  1. The user tabs into the field or clicks in atextarea.
  2. The user types some text.
  3. The user then presses Tab or clicks on another part of the page to exit the text field ortextarea.

One issue with intervention-less form sending is that users are not accustomed to this kind of behavior from web forms. A user might be put off or confused by web-form controls such as text fields that dynamically submit their own data. The user interface should make it clear that “something is going to happen” when the user is finished with the text field, or display a message or progress indicator when the request object is sending the data. In addition, depending on the sensitivity of the task, you may want to add another layer of communication with the user, such as analertwindow asking “Are you sure you want to submit the information?”

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials