...
Code Block | ||
---|---|---|
| ||
/*member description productId resultSet */ var x; if (form.load) { eval('x=' + http.get('http://localhost:8082/database/products')); var opts1 = []; var opts2 = []; for (var i=0; i < x.resultSet.length; i++) { if (x.resultSet[i]) { opts1[i] = x.resultSet[i].description; opts2[i] = x.resultSet[i].productId; } } Products.options = opts1; PID.options = opts2; Products.value = opts1[0]; // default to 1st product option PID.value = opts2[0]; } |
Finding a Selected Options Index
...
Code Block |
---|
/*member ids products */ var x; if (S.value.length > 0) { eval('x=' + http.get ('http://localhost:8082/products/?category=' + S.value)); P.options = x.products; ID.options = x.ids; } |
Synchronized Selects
The Product Search example above is often used in conjunction with a hidden select control. Imagine that your database table contains a list of products. Each product has product description also a unique product ID. The user needs to select a product from a dropdown on your form. You want to populate the dropdown with the product descriptions. The users do not need to see or know the product IDs but you need to use the ID as the key into the database for other selects. To do this add another hidden dropdown to the form and populate it with the IDs. This example has a visible dropdown name Products and an invisible dropdown named PID. See the rule above that populates these dropdowns dynamically from the database.
...
This rule makes a specific tab the selected tab based on the choice of a radio control. The radio is named SelectTab and has three options: person, auto, home. The tabs are named personTab, autoTab and homeTab. Tabs also can be selected based on trigger controls or other input controls using the same method show here.
Code Block | |
---|---|
javascript | if (SelectTab.value.length > 0) { autoTab.selected = false; homeTab.selected = false; personTab.selected = false; if (SelectTab.value === 'Auto') autoTab.selected = true; } else if (SelectTab.value === 'Home') { homeTab.selected = true; } else { personTab.selected = true; } } |
Next Tab
This form contains a trigger control at the bottom of each tab labeled "Next". When "Next" is clicked the trigger rule executes and makes the next tab the selected tab. This assists the user in navigating through the form. The Tabs are named T1, T2, T3, T4. The trigger controls are named C1, C2, C3
...