GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Main Page
  • Help
  • Browse
  • Cookbook
  • Wikijunior
  • Featured books
  • Recent changes
  • Special pages
  • Random book
  • Using Wikibooks
  • Reading room forum
  • Community portal
  • Help out!
  • Policies and guidelines

This view

  • Original page
  • New address

GeezerVison is showing en.wikibooks.org — JavaScript/Forms - Wikibooks, open books for an open world

< JavaScript
Working with the mouse
Images


Working with the mouse
Images


Many users are familiar with filling out forms on a web page and then hitting the "submit" button. There are at least two ways JavaScript can improve this process:

  • JavaScript can be used to check the data before it is sent to the server.
    • JavaScript can pre-validate the data, to catch common errors and suggest improvements immediately while the user is filling out the form, before the user clicks the "submit" button.
    • JavaScript can take text typed into a text area and pre-render it in a separate area of the page, so people can see how it will be rendered and formatted before clicking the "preview" button.[1][2][3]
    • JavaScript can give a live wordcount or character count of text typed into a text area.[4][5][6][7]
  • Sometimes a web site does a "online" calculation involving only a small amount of data and returns the result to the user. In this case, JavaScript can intercept the "submit" button, do the entire calculation locally in the browser. The user gets the results more or less immediately, rather than waiting for the data he typed in to be sent to the server, waiting for the server to get around to processing that data, and waiting for the data to come back from the server.
Wikipedia has related information at Unobtrusive JavaScript.
Wikipedia has related information at web accessibility.
Wikipedia has related information at graceful degradation.

Many people recommend keeping all the content accessible to people with disabilities and to people who have JavaScript turned off. One way to do that is to start with standard HTML forms, and then add unobtrusive JavaScript to improve the user experience to people who have JavaScript turned on. The system should degrade gracefully, keeping all the content available (and validating user data, if necessary), whether or not any or all of the JavaScript runs successfully.

Further reading

  • JavaScript/Working With Files mentions one use of HTML forms
  • HyperText Markup Language/Forms explains how to write "plain" forms without JavaScript.

References

  1. ↑ "How can I display the HTML content of a Text Area within a div as HTML content and not text?"
  2. ↑ Andrey Fedoseev. "jQuery plugin to add realtime preview panel to text areas, similar to StackOverflow edit interface"
  3. ↑ Guillaume DE LA RUE. "A Markdown live editor in JS".
  4. ↑ Sacha Schmid. JavaScript word count
  5. ↑ Drew Schrauf. "JavaScript Wordcount That Works".
  6. ↑ "JavaScript word-count for any given DOM element"
  7. ↑ Jake Rocheleau. "Building a Live Text area Character Count Limit with CSS3 and jQuery"
Retrieved from "https://en.wikibooks.org/w/index.php?title=JavaScript/Forms&oldid=4237087"
Category:
  • Book:JavaScript
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.