----- Original Message -----
Sent: Saturday, July 27, 2002 4:49
AM
Subject: Witango-Talk: Dynamic Drop-downs
using JavaScript (was Need help!)
I've
been stumbling with this for the past week and I can't quite seem to get it to
do what I want to do.
I've
got two WiTango arrays. The first is appa_company which contains the following
fields: companyid, name. The second array is appa_contact which contains the
following fields: contactid, companyid, firstname, lastname.
What
I want to have is a form with a variety of fields on it including two
drop-downs, one for company and another for contact. The company and contact
drop-downs that I'm using now have the following code to build
them:
<SELECT NAME="companyid" SIZE=1>
<OPTION
VALUE="">
<@ROWS START=1 STEP=1
ARRAY="appa_company">
<OPTION VALUE="<@COL NUM='1'>"><@COL
NUM='2'>
</@ROWS>
</SELECT>
<SELECT NAME="contactid" SIZE=1>
<OPTION
VALUE="">
<@ROWS START=1 STEP=1
ARRAY="appa_contact">
<OPTION VALUE="<@COL NUM='1'>"><@COL NUM='3'> <@COL
NUM='4'>
</@ROWS>
</SELECT>
Simple stuff. I've been using this for years but I
want something more dynamic. What I want to have happen is that when a
user selects the company field, I want to display only the contacts who have
the selected value from the company drop-down in their companyid field. And when the user hits the submit button, I want to
see the respective companyid and contactid of the selections they have made.
What I've got so far is the following:
<HTML>
<HEAD><TITLE>JavaScript Dynamic Pop-Up
Example</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!-- JavaScript code
function SetValues()
{
var theForm = document.example;
var theAttributePopup = theForm.company;
var theValuePopup = theForm.contact;
var selectedAttributeIndex =
theAttributePopup.selectedIndex;
var selectedAttribute =
theAttributePopup.options[selectedAttributeIndex].value;
theValuePopup.options.length = 0; //clear the
pop-up
if (selectedAttribute == '1') {
<@ROWS START=1 STEP=1 ARRAY=<@FILTER
ARRAY="appa_contact" EXPR="#2 = 1">>
theValuePopup.options[<@CALC "<@CURROW>-1">] =
new Option('<@COL 3> <@COL 4>');
</@ROWS>
}
<@ROWS START=2 STEP=1
ARRAY="appa_company">
else if (selectedAttribute == '<@COL 1>')
{
<@ROWS START=1 STEP=1 ARRAY=<@FILTER
ARRAY="appa_contact" EXPR="#2 = <@COL 1>">>
theValuePopup.options[<@CALC "<@CURROW>-1">] =
new Option('<@COL 3> <@COL 4>');
</@ROWS>
}
</@ROWS>
}
//-->
</SCRIPT>
<FORM
ACTION="<@CGI><@APPFILE>?_function=test" METHOD=POST
NAME=example>
<table border=0>
<TR>
<TD valign=middle>
Company:
</TD>
<TD>
<SELECT NAME="company" SIZE=1
onChange="SetValues()">
<OPTION VALUE="">
<@ROWS START=1 STEP=1
ARRAY="appa_company">
<OPTION VALUE="<@COL NUM='1'>"><@COL
NUM='2'>
</@ROWS>
</SELECT>
</TD>
</TR>
<TR>
<TD valign=middle>
Contact:
</TD>
<TD>
<SELECT NAME=contact SIZE=1>
<OPTION VALUE="" SELECTED>Please select
<@ROWS START=1 STEP=1 ARRAY=<@FILTER
ARRAY="appa_contact" EXPR="#2 = 1">>
<OPTION VALUE="<@COL 1>"><@COL 3> <@COL
4>
</@ROWS>
</SELECT>
</TD>
</TR>
<INPUT TYPE=SUBMIT NAME="Submit"
VALUE="Submit">
</table>
</FORM>
But
alas it's not working. Also it seems to take a long time to
load.
I
did have the following which worked to a point:
<HTML>
<HEAD><TITLE>JavaScript
Dynamic Pop-Up Example</TITLE></HEAD>
<BODY>
<SCRIPT
LANGUAGE=JavaScript>
<!-- JavaScript
code
function SetValues()
{
var theForm =
document.example;
var theAttributePopup =
theForm.company;
var theValuePopup =
theForm.contact;
var selectedAttributeIndex =
theAttributePopup.selectedIndex;
var selectedAttribute =
theAttributePopup.options[selectedAttributeIndex].value;
theValuePopup.options.length = 0;
//clear the pop-up
if (selectedAttribute == '1')
{
<@ROWS START=1 STEP=1
ARRAY=<@FILTER ARRAY="appa_contact" EXPR="#2 = 1">>
theValuePopup.options[<@CALC
"<@CURROW>-1">] = new Option('<@COL 3> <@COL
4>');
</@ROWS>
}
else if (selectedAttribute == '2')
{
<@ROWS START=1 STEP=1
ARRAY=<@FILTER ARRAY="appa_contact" EXPR="#2 = 2">>
theValuePopup.options[<@CALC
"<@CURROW>-1">] = new Option('<@COL 3> <@COL
4>');
</@ROWS>
}
}
//-->
</SCRIPT>
<FORM
ACTION="<@CGI><@APPFILE>?_function=test" METHOD=POST
NAME=example>
<table border=0>
<TR>
<TD
valign=middle>
Company:
</TD>
<TD>
<SELECT NAME=company SIZE=1
onChange="SetValues()">
<OPTION VALUE=""
SELECTED>Please select
<OPTION VALUE="1">Company
A
<OPTION VALUE="2">Company
B
</SELECT>
</TD>
</TR>
<TR>
<TD
valign=middle>
Contact:
</TD>
<TD>
<SELECT NAME=contact
SIZE=1>
<OPTION VALUE=""
SELECTED>Please select
<@ROWS START=1 STEP=1
ARRAY=<@FILTER ARRAY="appa_contact" EXPR="#2 = 1">>
<OPTION VALUE="<@COL
1>"><@COL 3> <@COL 4>
</@ROWS>
</SELECT>
</TD>
</TR>
<INPUT TYPE=SUBMIT NAME="Submit"
VALUE="Submit">
</table>
</FORM>
But it isn't completely dynamic and when Company B is
selected, the value for the contact is the name of the contact, not the
contactid.
Any
suggestions???
Thanks in advance,
Steve Smith
Skadt Information Solutions
Office: (519) 624-4388
GTA: (416) 606-3885
Fax: (519) 624-3353
Cell: (416) 606-3885
Email: [EMAIL PROTECTED]
Web: http://www.skadt.com
dynamicdropdown.taf