RE: Witango-Talk: Dynamic Drop-downs using JavaScript (was Need help!)

Sat, 27 Jul 2002 07:47:49 -0700

That did it. However how would I modify it to have additional fields? For instance, you used a single field for contactname but I've got separate fields for first and last name. Also what if I needed to change the order of the fields for the contact? How would I modify the javascript? I'd also like to know so I can understand the javascript a little better so I can reuse the code for other drop-downs.
 
I tried doing this:
 
<@ASSIGN Local$CompanyArray @@user$ua_company>
<@ASSIGN Local$CompanyArray[0,*] <@ARRAY VALUE="CompanyId,CompanyName;">>
<@ASSIGN Local$ContactArray @@user$ua_contact>
<@ASSIGN Local$ContactArray[0,*] <@ARRAY VALUE="ContactId,FirstName,LastName,CompanyId;">>
<form name="SelectContact" action="<@CGI><@APPFILE>?_function=test">
<select name="CompanyId" onchange="PopulateContactList('SelectContact','ContactId',this.value);">
<@ROWS ARRAY="Local$CompanyArray">
<option value="<@VAR Local$CompanyArray[<@CURROW>,CompanyId]>">
<@VAR Local$CompanyArray[<@CURROW>,CompanyName]>
</option>
</@ROWS>
</select>
<select name="ContactId">
</select>
<INPUT TYPE=SUBMIT NAME="Submit" VALUE="Submit">
</form>
<script>
var ContactArray=new Array();
var CompanyArray=new Array();
<@ROWS ARRAY="Local$ContactArray">
ContactArray[<@CALC EXPR="<@CURROW>-1">]= new Object();
ContactArray[<@CALC EXPR="<@CURROW>-1">].length=<@NUMCOLS ARRAY="Local$ContactArray">;
<@COLS>
ContactArray[<@CALC EXPR="<@CURROW>-1">].<@VAR Local$ContactArray[0,<@CURCOL>]>= '<@VAR Local$ContactArray[<@CURROW>,<@CURCOL>]>'
</@COLS>
</@ROWS>
<@ROWS ARRAY="Local$CompanyArray">
CompanyArray[<@CALC EXPR="<@CURROW>-1">]= new Object();
CompanyArray[<@CALC EXPR="<@CURROW>-1">].length=<@NUMCOLS ARRAY="Local$CompanyArray">;
<@COLS>
CompanyArray[<@CALC EXPR="<@CURROW>-1">].<@VAR Local$ContactArray[0,<@CURCOL>]>= '<@VAR Local$CompanyArray[<@CURROW>,<@CURCOL>]>'
</@COLS>
</@ROWS>
function PopulateContactList(FormName,SelectName,CompanyId)
{
ClearList(FormName,SelectName);
for(i=0;i<ContactArray.length;i++)
if(ContactArray[i].CompanyId==CompanyId)
AddContactListOption(FormName,SelectName,ContactArray[i]);
}
function AddContactListOption(FormName,SelectName,ContactStructure)
{
var option=document.createElement("OPTION");
option.text=ContactStructure.FirstName;
option.text=ContactStructure.LastName;
option.value=ContactStructure.ContactId;
document.forms[FormName].elements[SelectName].add(option);
}
function ClearList(FormName,SelectName)
{
while(document.forms[FormName].elements[SelectName].length)
document.forms[FormName].elements[SelectName].remove(0);
}
PopulateContactList('SelectContact','ContactId','<@VAR Local$CompanyArray[1,CompanyId]>');
</script>
 
Which still works but it only displays the last name of the contact in the contact drop-down.
 
Thanks,

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

-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]]On Behalf Of [Gauthier]
Sent: July 27, 2002 12:28 AM
To: Multiple recipients of list witango-talk
Subject: Re: Witango-Talk: Dynamic Drop-downs using JavaScript (was Need help!)

Will this exemple solve your problem?
 
Gauthier
----- 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

 

Reply via email to