| Dreamweaver includes 27 built-in JavaScript behaviors that can be incorporated into your pages to add interactivity. Some of these behaviors, such as Set Text of Status Bar, which dynamically adds a message in the browser status bar, and Go to URL, which opens a URL, can be added to form objects to create actions such as sending messages to the user or opening a new page when the user submits the form or selects an item in a menu. Adding JavaScript behaviors to form objects is useful when you want to do the following: - Provide messages to the form user when a certain action occurs (for example, a check box is selected or information is entered in a text field)
- Send the user to a new page when a certain action occurs (for example, a radio button is selected or the submit button is clicked)
- Validate the form data before sending it to the server (for example, to make sure the required form fields are filled out and the data is in the correct format)
You don't need to know JavaScript to use these behaviors in Dreamweaver, but if you're familiar with it, you can also add custom JavaScript scripts in Dreamweaver to form objects that, for example, prevent the user from entering letters in a field that only accepts numbers. The exercises in this section involve adding the following: A Set Text of Status Bar behavior to a form check box on an ASP page, so that a message displays in the status bar when the user checks the box A custom JavaScript behavior to a form button, so that an alert message displays when the user clicks the button A Go to URL behavior to a menu to create a jump menu, which is a menu with a URL associated with each menu item. When a menu item is selected, the browser opens the associated URL.
You'll use additional behaviors to validate form information in the section "Validating Forms," later in this chapter. To add JavaScript behaviors to form objects: 1. | From the File menu, select New > Dynamic page > ASP JavaScript to create a new ASP page.
To this page we'll add an HTML form with a check box, and then add a Set Text of Status Bar behavior to the check box so that a message displays in the status bar after the check box is selected.
| 2. | From the Insert menu, select Form > Form to add a form to your page.
| 3. | From the Insert menu, select Form > Checkbox to add a check box to your page.
| 4. | In the Design view window, select the check box.
| 5. | In the Tag Inspector panel group, click the Behaviors tab to access the Behaviors panel (Figure 8.27).
Figure 8.27. The Behaviors panel is part of the Tag Inspector panel group. 
| 6. | Click the plus button to open the Behaviors menu. Select Set Text > Set Text of Status Bar (Figure 8.28).
Figure 8.28. Dreamweaver's built-in JavaScript behaviors are listed in the Behaviors menu. Select Set Text of Status Bar from the Set Text submenu. 
The Set Text of Status Bar dialog appears (Figure 8.29).
Figure 8.29. Enter the status bar text in the Message field of the Set Text of Status Bar dialog. 
| 7. | In the Message field, enter the message you want to appear in the browser status bar. Because we're asking users to remain on a mailing list, we'll add the text "Thank you!" to the Message field. Click OK to close the dialog.
| 8. | On the Behaviors panel, click the event listed to the left of the Set Text of Status Bar behavior to access the event dropdown list (Figure 8.30).
Figure 8.30. Choose an event from the event menu on the Behaviors panel after you've selected a behavior. 
The onClick event is one of the most common events, and it's the default event for all JavaScript behaviors in Dreamweaver. It's also an appropriate event for our example, because we're changing the status bar text based on whether or not the user selects the check box by clicking it.
If you want to choose a different event, select it from the event menu. The choices in the event menu may vary, depending on the behavior you've selected.
| 9. | Save the page and choose File > Preview in Browser to open it in a browser. Check the box to see the message display in the status bar (Figure 8.31).
Figure 8.31. When the user checks the box, a message displays in the browser status bar. 
|
To add custom scripts to form buttons: 1. | From the File menu, select New > Dynamic page > ASP JavaScript to create a new ASP page.
We'll add a form and a form button to this page, and then add a Call JavaScript behavior to the button. Call JavaScript lets you add your own JavaScript to create an action in response to the button's being clicked. We'll also add a custom alert message that displays when the user clicks the button.
| 2. | From the Insert menu, select Form > Form to add a form to your page.
| 3. | From the Insert menu, select Form > Button to add a button to your page.
| 4. | In the Design view window, select the button.
| 5. | In the Tag Inspector panel group, click the Behaviors tab to access the Behaviors panel.
| 6. | Click the plus button to open the Behaviors menu. Select Call JavaScript (Figure 8.32).
Figure 8.32. Select Call JavaScript from the Behaviors menu. 
The Call JavaScript dialog appears (Figure 8.33).
Figure 8.33. Enter JavaScript code in the Call JavaScript dialog. 
 Tip
HTML form objects include submit and reset buttons to submit form data or clear all the entries in the form. Form buttons don't have to be used to submit or reset data, though. A form button can be used with an event and a JavaScript behavior to create interactivity on your pages, such as the alert message we added in this task.
| 7. | In the JavaScript field, enter the JavaScript code you want to add to the button. In our case, we'll add myAlert(); to call the myAlert function and create an alert box that appears when the user clicks the button.
Dreamweaver automatically adds an onClick event to this behavior unless we select a different event from the events menu in the Behaviors panel. We use the default event (onClick) with the Call JavaScript behavior because the behavior is called when the user clicks the button.
| 8. | You may need to add additional JavaScript to your document. In this case, because we're calling the myAlert JavaScript function, we have to add the code for the function. We add the code in a script block in the head section of the page so that the code will be read by the browser's JavaScript interpreter before the button is clicked; otherwise, the user may see an error message rather than an alert box:
<head> <script type="text/JavaScript">  function myAlert() { alert ('Greetings, earthling!');} </script> </head>
Once this code is added to the head section, a browser will display the message in an alert box when the user clicks the button. Just change the message in the parentheses following alert if you want to display your own message in the alert box.
| 9. | Save the file and preview it in a browser by choosing File > Preview in Browser.
If you click the button, the message "Greetings, earthling!" displays in an alert box (Figure 8.34).
Figure 8.34. An alert box appears when the button is clicked. 
|
To add a jump menu: 1. | From the File menu, select New > Dynamic page > ASP JavaScript to create a new ASP page.
You'll add a form to your page and then insert a jump menu that adds a URL to each menu item.
| 2. | From the Insert menu, select Form > Form to add a form to your page.
| 3. | From the Insert menu, select Form > Jump Menu to add a jump menu to your page.
The Jump Menu dialog appears (Figure 8.35).
Figure 8.35. Add menu items and URLs in the Jump Menu dialog. 
| 4. | In the Text field, enter the name of a menu item. For our purposes, we're adding the text Home, since that's the name of the first item we want to include in our menu.
Home is added to the Menu Items section for the name of the first item in the menu.
| 5. | In the When Selected, Go to URL field, enter a URL for the page associated with the first menu itemin this case, the URL for the homepage.
The URL (index.html) is added to the Menu Items section.
| 6. | Click the plus button if you want to add additional menu items. Repeat Steps 4 and 5 for each additional item.
The Menu Items section displays a list of each menu item and the URL associated with the item.
The next two steps in this exercise are optional.
| 7. | In the Open URLs In field, select a window for the new pages to open in if you are using frames on your page. Use this field only if you're using frames.
| 8. | If you want to use the first menu item in the Menu Items list as a selection cue, such as Select One, then check the Select First Item After URL Change box. If you're using the first menu item as a selection cue, you don't need to add a URL for the first item. If you're not using a selection cue, don't check this box.
| 9. | Click OK to close the dialog.
The jump menu is inserted on the page. Choose File > Preview in Browser to view the menu (Figure 8.36).
Figure 8.36. When the user selects a menu item from a jump menu, the browser will go to the URL associated with that item. 
|
|
