- Part 1: Building the Table Structure
- Part 2: Adding Form Elements and Tweaking the Form's Look
- Part 3: Adding Functionality and Validating the Form
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Part 3: Adding Functionality and Validating the Form
In the last section, you added two text elements to the Newsletters section: Check All and Uncheck All. The next order of business is to insert the code so that when a user clicks Check All, all the newsletters get selected. The second portion of the code occurs when the user clicks Uncheck All and unchecks all the newsletters.
Implementing this functionality is a three-step process. Step 1 is to make Check All a link that that tells the browser to check every check box. Begin by highlighting the text Check All in the Newsletters section of the contact form. In the Property inspector, type javascript:checkAll(true); in the Link text box.
Step 2 makes the Uncheck All text a link that tells the browser to uncheck every box. Highlight the text Uncheck All. In the Property inspector, type javascript:checkAll(false); in the link text box.
Step 3, the last step, requires inserting the JavaScript function into the HEAD section of the document. Find the </head> tag, toward the top of the page, and add the following code above it:
<script language="JavaScript">
function checkAll(value) {
var d = document.contactus;
for(var i = 0; i < d.newsletters.length; i++) {
d.newsletters[i].checked = value;
}
return;
}
//-->
</script>
The function above takes the value that is passed to it when you click either Check All (true) or Uncheck All (false). It then uses a for loop to set each newsletter's check box to that value.
Press the F12 key on your keyboard to preview the "contact us" page in a browser. When the page loads, click the Check All and Uncheck All links to see how they work.
Dreamweaver's Validate Form behavior
In addition to hand coding form validation like you did in the last section, you can use Dreamweaver's built-in behaviors to validate a form. A behavior is a Dreamweaver term used to describe a combination of an event and an action. An event refers to something that happens in a Web browser—for example:
When a page loads, the JavaScript onLoad event occurs.
When a user clicks a link, the JavaScript onClick event occurs.
An action refers to a prewritten piece of JavaScript code associated with an event.
Both the event and the action are attached to an HTML page element, such as a link. Whenever the event occurs (for example, clicking on a link), the action takes place (for example, displaying a rollover image).
In this section, you'll attach Dreamweaver's Validate Form behavior to your "contact us" form. This will allow you to check whether certain text fields are filled in and to confirm that an e-mail address has been entered in the E-mail Address text box.
The first step is to select an HTML element to attach the Validate Form behavior to. Click the Submit button to select it. Next, click Window, Behaviors. The Behaviors palette appears.
At the top of the Behaviors palette, click the + sign to display the available behaviors. Then click Validate Form, as shown in Figure 36.
)
Figure 36 Selecting the Validate Form behavior.
The Validate Form dialog box appears.
The Named Fields section displays every text box in your form. The first one (firstname) is highlighted.
Check the Value: Required box. This inserts the code that requires this text box to be filled in.
Under the Accept section, Anything should be checked. That means that it will accept anything that the user types.
Set up each of the text boxes listed in the Named Fields, except for emailaddress, as shown above.
Finally, select emailaddress. Check Value: Required. In the Accept section, select Email Address.
When you're done, your Validate Form dialog box will look like the one in Figure 37. Click OK to finish adding the code.
)
Figure 37 The completed Validate Form dialog box.
Click on the Submit button to ensure that it's selected, and then look at the Behaviors palette. Notice how it lists an event onClick and an action, Validate Form. When a user clicks the Submit button, the onClick event fires and the form is validated.
The last thing to do is make the required field's labels bold. Highlight each of the following fields and then click the B icon in the Property inspector to make them bold:
- First name:
- Last name:
- E-mail address:
- Comments:
Your form is now complete!
In this article, you learned how to build a table structure to create a clean-looking form. You also learned how to insert and modify form elements and attach validation code, including Dreamweaver's behaviors. To download additional behaviors, visit http://www.macromedia.com/exchange.