5ml User's Guide

CHAPTER 3: 5ml Tutorial
4. Add a Radio Button group:
a. Drag the Radio Button widget from the Widgets pane to the Canvas.
b. Resize and position the Radio Button element.
c. In the Properties pane to the right, in the Value field, enter a value for the new Radio Button element. For
example, enter 1.
d. In the Text field, enter a label for the Radio Button element. For example, enter TV.
e. Drag an additional two Radio Button widgets from the Widgets pane to the Canvas. For each Radio Button
element, enter a unique Value and Text label. For example, 2 and Radio, and 3 and Other.
Note: Within a group of Radio Button elements, each Radio Button element's Value field must contain a
unique value.
f. Edit the second and third Radio Button element's ID field to match the first Radio Button element's ID value.
Note: To create a group of Radio Button elements, each Radio Button element's ID field must contain the
exact same value.
g. Now that each Radio Button element has the same ID and each has a unique Value, you can select which
Radio Button element will be set as the default Radio Button element. On the Canvas select the default
Radio Button element, and in the Properties pane, select the Checked check box.
Figure 3-48: Adding JavaScript code to create the Custom Function sendForm
5. Add a submit button and JavaScript code:
In order to gather the user entered data, you need to write custom JavaScript code to capture the data from the
specific fields in your form. You also need to provide a way to execute the JavaScript code. To do this you can add
a Button element to the page and on the Button element's Behavior tab, you can select an event and action. For
example, on clicking (onclick) the button the JavaScript code (Custom Function) executes.
- 72 -