Sams Teach Yourself JavaScript in 24 Hours

By Michael Moncur

• Table of Contents
  • Copyright
  • About the Author
  • Acknowledgments
  • We Want to Hear from You!
  • Reader Services
  • Introduction
  • Part I: Getting Started
  • Hour 1. Understanding JavaScript
  • Hour 2. Creating a Simple Script
  • Hour 3. How JavaScript Programs Work
  • Part II: Learning JavaScript Basics
  • Hour 4. Using Functions and Variables
  • Hour 5. Using Strings and Arrays
  • Hour 6. Testing and Comparing Values
  • Hour 7. Repeating Yourself: Using Loops
  • Hour 8. Using Math and Date Functions
  • Part III: The Document Object Model (DOM)
  • Hour 9. Working with the Document Object Model
  • Hour 10. Responding to Events
  • Hour 11. Using Windows and Frames
  • Hour 12. Getting Data with Forms
    • The Basics of HTML Forms
    • Using the form Object with JavaScript
    • Scripting Form Elements
    • Displaying Data from a Form
    • Sending Form Results by Email
    • Workshop: Validating a Form
    • Summary
    • Q&A
    • Quiz
    • Exercises
  • Hour 13. Using Graphics and Animation
  • Part IV: Moving on to Advanced JavaScript Features
  • Hour 14. Creating Cross-Browser Scripts
  • Hour 15. Creating Custom Objects
  • Hour 16. Working with Sounds and Plug-Ins
  • Hour 17. Debugging JavaScript Applications
  • Part V: Working with Dynamic HTML (DHTML)
  • Hour 18. Working with Style Sheets
  • Hour 19. Using Dynamic HTML (DHTML)
  • Hour 20. Using Advanced DOM Features
  • Part VI: Putting It All Together
  • Hour 21. Improving a Web Page with JavaScript
  • Hour 22. Creating a JavaScript Game
  • Hour 23. Creating DHTML Applications
  • Hour 24. JavaScript Tips and Tricks
  • Part VII: Appendices
  • Appendix A. Other JavaScript Resources
  • Appendix B. Tools for JavaScript Developers
  • Appendix C. Glossary
  • Appendix D. JavaScript Quick Reference
  • Appendix E. DOM Quick Reference

Using the form Object with JavaScript

Each form in your HTML page is represented in JavaScript by a form object, which has the same name as the NAME attribute in the <form> tag you used to define it.

Alternately, you can use the forms array to refer to forms. This array includes an item for each form element, indexed starting with 0. For example, if the first form in a document has the name form1, you can refer to it in one of two ways:

document.form1
document.forms[0]

The form Object's Properties

Along with the elements, each form object also has a list of properties, most of which are defined by the corresponding <form> tag. You can also set these from within JavaScript. They include the following:

• action is the form's ACTION attribute, or the program to which the form data will be submitted.
• encoding is the MIME type of the form, specified with the ENCTYPE attribute. In most cases, this is not needed.
• length is the number of elements in the form. You cannot change this property.
• method is the method used to submit the form, either GET or POST.
• target specifies the window in which the result of the form (from the CGI script) will be displayed. Normally, this is done in the main window, replacing the form itself.

Submitting and Resetting Forms

The form object has two methods, submit and reset. You can use these methods to submit the data or reset the form yourself, without requiring the user to press a button. One reason for this is to submit the form when the user clicks an image or performs another action that would not usually submit the form.

Detecting Form Events

The form object has two event handlers, onSubmit and onReset. You can specify a group of JavaScript statements or a function call for these events within the <form> tag that defines the form.

If you specify a statement or function for the onSubmit event, the statement is called before the data is submitted to the CGI script. You can prevent the submission from happening by returning a value of false from the onSubmit event handler. If the statement returns true, the data will be submitted. In the same fashion, you can prevent a Reset button from working with an onReset event handler.

Share This