|
When you start using JavaScript you will find that one of the most common tasks is to script forms. Here are a few examples of those tasks:
- Validating forms.
- Calculating forms.
- Using forms as a user interface to your scripts.
As you might have guessed, if you read the other tutorials, the form is an object. The form object even has some unique events like "onSubmit" and "onReset".
It's possible to trigger a submission from the script by using document.forms[0].submit(). The "forms[0]" part of the syntax tells us that JavaScript automatically creates an array of forms. The first form in the page is document.forms[0], the second form is document.forms[1]...etc. This is very useful if we don't know the name of the form, or if we want to be able to change the name without getting any bad side effects in our scripts.
JavaScript even creates "special" arrays when you give more than one object the same name. This is very useful in order forms. You can give all text fields containing a quantity the same name and JavaScript will create an array for you. Later you can use a loop to scan all the "slots" in the array and add up the total quantity for the order!
Forms can contain a number of different objects like, text fields, text areas, checkboxes, radio buttons, select objects, buttons... All of these objects can be referenced through an array called "elements" the first element in the first form on the page is: document.forms[0].elements[0].
Your fingers will probably get tired very fast if you have to write document.forms[0] or document.theFormName over and over again in a script, so you should know that there is a nice shortcut that can help you and your fingers, and save a lot of time!
By using a "with" statement you can tell JavaScript that "from now on, until the closing curly bracket of the "with" statement, I will be referencing this form and nothing else". Here is an example:
with (document.myOrderForm){
if (name.value==""||phone.value==""||address.value==""){
alert("Important info is missing!")
}
}
If we hadn't used the "with" statement the same code would have looked like this:
if(document.myOrderForm.name.value=="" || document.myOrderForm.phone.value=="" || document.myOrderForm.address.value=""){
alert("Important info is missing!")
}
Before we end this tutorial I better explain that the strange "||", it means "or". So what we test in the if statement above does is this:
"If the name field value is equal to nothing (an empty string) OR if the phone field value is equal to nothing...etc.)" do this...
If we wanted to check if BOTH the address AND the phone field is empty we could have used "&&" which means "AND". We will talk more about "or" and "and" in a later tutorial.
This was a very brief introduction to forms, the next tutorial will contain more hands on training and you will learn how to:
- Validate a form
- Stop the submission and display an error message if the form doesn't validate.
- And when everything is okay, submit the form.
Back to tutorial index <<
|
