JavaScript: Forms - capturing input from the visitor
This page shows how JavaScript can enhance website form functionality.
JavaScript code snippets listed by task and organised in a tutorial style each building on the previous example. New topics are introduced when required.
1. |
Simple form with button that responds to the 'onClick' event. Example of correct nesting of nested single and double quotes. |
2. |
Printing from one form element to another. Example of use of dot notation when referencing form elements. |
3. |
Calling a function with a button click. Example of a function with empty arguments.
JavaScript can respond to many different events through event handlers. See the full list of events handlers available in Event handlers. |
4. |
Collecting user input and performing a calculation. Example of a modular approach to function creation: the ability to call a previously created function from a function library without modification. |
5. |
Building a simple calculator. Using a table for layout of the elements. Example of use of the keyword 'this' combined with '.form' to pass an object to a function.
See JavaScript: Maths snippet 7 for a more advanced desktop calculator. |
6. |
Intercepting a form's 'submit' button with the window 'alert()' method dialog box to provide form validation. Simple form validation to test if user has entered any value into the form element. Example of use of keyword 'this' to pass an object to a function. Use of 'focus()' to help user enter a value into the correct form element. Use of 'return false' and 'return true' within a function validating a form.
Return true or false?If the value returned by the function is true, then the action to submit the form will continue. If the value returned is false, then the submit action is interrupted.
Learn about the JavaScript dialog boxes. |
7. |
Improved form validation to test for email format using a 'regular expression'. Use of 'focus()' with the <body> 'onload' attribute and 'select()' to help user with form completion. Correct use of 'return false' and 'return true' in this situation.
Client-side or server-side validation or both?Client-side validation allows errors in data entry to be picked up and corrected before form submission which reduces network traffic and prevents delay in processing data. Users demand instant feedback which can be more readily achieved with JavaScript client-side. Server-side validation or revalidation of data in the submitted form is an essential security measure and always required, preventing damage to a website or access to information stored server-side such as in a database.
See how to add server-side functionality to forms using PHP in PHP: Intro - Process data from website forms.
Learn how to store the data from forms in cookies using JavaScript in JavaScript: Cookies.
|
8. |
Build on the above and learn about JavaScript and the Document Object Model (DOM). View code examples on JavaScript: DOM page. |
| Suggest a code snippet to add to this category. | |
Back to top.
Copyright © 2006-2010 justfigures.co.uk
