|
|
|
|
|
|
|
|
|
|
|
|
|
|
Implementing dynamic drop-down menus using Domino and Internet Explorer (continued)
Remember that JavaScript is case sensitive, so make sure you get the case correct for the Manufacturer field and the Model field.
Field A (the Manufacturer field)
At the bottom of the page, above the <noscript> tag (making sure that <noscript> is always at the very bottom of the page), create a new field and name it "Manufacturer".
Set the field type to "Editable" and "Dialog list".
Set the field to "Enter choices (one per line)" and enter the following:
Ford|Ford
Mazda|Mazda
Alfa Romeo|Alfa Romeo
|
This is shown in Figure A.
FIGURE A
 
Enter the choices shown. Roll over picture for a larger image.
The reason that the choices are duplicated with a pipe symbol "|" in between them is that HTML drop down fields can have text to display in the dropdown and also an actual value returned when accessing the field programmatically. Without the pipe and a second value, then you would find that code asking for the value of the dropdown field would return blank.
In the "onchange" event for the Manufacturer field, type:
This is shown in Figure B.
FIGURE B
 
Enter the "onchange" event for the Manufacturer. Roll over picture for a larger image.
This means that whenever the value in the Manufacturer field changes, the JavaScript function UpdateModel() will be executed.
Field B (the Model field)
Underneath the Manufacturer field, create a new field and name it "Model".
Set the field type to "Editable" and "Dialog list".
You can leave the contents of this field empty because the contents are set dynamically by the UpdateModel() JavaScript function.
Add some field titles and formatting: Prefix the Manufacturer field with some text saying "Manufacturer" and suffix it with <BR>. Prefix the Model field with some text saying "Model" and suffix it with <BR>. This is shown in Figure C.
FIGURE C
 
Add some field titles and formatting. Roll over picture for a larger image.
Step 4: Create the UpdateModel() JavaScript function that updates field B
This JavaScript function is the core of our demonstration. It's first executed when the HTML page loads. After that it's called every time the value of field A (the Manufacturer field) changes.
Here's some p-code to explain what the JavaScript function does:
- Get the currently selected value in field A (the Manufacturer field);
- Remove all of the current values from field B (the Model field);
- Loop through each row in the JavaScript array. If this row matches the field A then update field B with the appropriate value.
On the form that we created and named "demo", at the top of the page, add the following JavaScript code:
<script>
function UpdateModel(){
frm = document.forms[0];
frm.Model.length=0;
var selectedvalue = frm.Manufacturer.options[frm.Manufacturer.selectedIndex].value;
for (j in dropdownarray) {
if (dropdownarray[j][0] == selectedvalue) {
var newoption = document.createElement("OPTION");
frm.Model.options.add(newoption);
newoption.innerText = dropdownarray[j][1];
newoption.value = dropdownarray[j][1];
}
}
}
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-- Advertisement --
Sophisticated Meets Simple For Document Management
Share. Control. Manage.
Documents, emails, and content in the context of how work is done.
Native to Lotus Domino. The User Experience unseen for Lotus Domino.
Do more with less. Really.
See the possibilities Docova unleashes for Lotus Domino. |
-- Advertisement --
Mark your calendar for in-depth Lotus training, May 12-14, Boston
Join experts and peers May 12-14 in Boston for educational and networking events that deliver real-world Lotus training so you can increase productivity and efficiency in your company, advance your skills, and squeeze the most from your current environment. One registration gets you into THE VIEW's Admin2010 and Lotus Developer2010.
Register by April 10 to save $200. |
|
|
|
|
|
|
|
|
|
|
