How to populate dropdown 2 based on the value in dropdown1.

[msng]

I have 2 dropdowns on my screen. One is for cust_code and the other is for svc_code. A given cust_code can have multiple svc_code values. Hence, when a cust_code value is selected from the dropdown, then the svc_code dropdown need to be refreshed and be populated with the values that are valid for the selected cust_code. How can I do it???

I can provide more details, if needed. Please help.

Both the cust_code/svc_code combination form a primary key in table customer.

 

[NorthStarDA]

http://tutorial166.easycfm.com/

you should search the forums for many ways to do this- the question gets asked alot.


=========================================
I have not failed. I've just found 10,000 ways that won't work.
Thomas A. Edison

 

[msng]

Thanks for your response. Also, I searched this forum for my query. I found several postings.

However, I have finally figured out that I need to implement this using JavaScript only.

I have 2 dropdowns. Ths first dropdown is cust_code that is being populated from customer table.

When the user selects the cust_code value, then I need to populate the second dropdown service_code using the selected cust_code value.

Since I am using Javascript to populate the fields on my form, can you please let me know as to how can this be implemented using Javascript only.

Please help. Thanks in advance.

 

[philhege]

The custom tags CF_TwoSelectsRelated and CF_ThreeSelectsRelated do precisely that: they take a query and render it into Javascript functions that dynamically populate dropdown2 based on the selection in dropdown1. If you look at the output from the custom tag, you can get an idea of how this works.

I really don't understand what you mean by "Javascript only". Is the query result way too big for a Web page? You have to get the data from somewhere; that requires a trip to the server. Client-side JS doesn't do this.

Phil Hegedusich
Senior Web Developer
IIMAK

http://www.iimak.com

-----------
Boy howdy, my Liberal Studies degree really prepared me for this....
-----------
A skeleton walks into a bar, and says "I'll have a beer and a mop.

 

[msng]

philhege:

Is <CF_TwoSelectedTags> valid with CF 5.0? If yes, then this is not available in our list of installed custom tags.

Also, when I say Javascript only, I mean if I could implement this onChange event of the first dropdown.

Please let me know.
Thanks a ton.

 

[msng]

Also, I have 2 queries as below :

For the first dropdown,

select cust_code
from customer
order by cust_code

For the second dropdown,

select distinct svc_code
from customer
where cust_code = (value selected in the first dropdown)

Please let me know if you need more info.

thanks.

 

[philhege]

<SNIP>
...this is not available in our list of installed custom tags.
</SNIP>

Then I'd lobby to have it included. It's perfectly harmless (it's a CFML template, NOT a DLL) and it provides killer functionality.



Phil Hegedusich
Senior Web Developer
IIMAK

http://www.iimak.com

-----------
Boy howdy, my Liberal Studies degree really prepared me for this....
-----------
A skeleton walks into a bar, and says "I'll have a beer and a mop.

 

[msng]

philhege:

Nothing is working from me. The reason is my code is not straightforward. Please see part of my code.
In the comboselect below, when the cust_code is selected, the dropdown for svc_code has to be populated pertaining to the selected cust_code. For populating the fields, I am calling the Javascript findSelectedIndex. Please see the code for these below.

QUERIES

<cfquery name="available_customer_qry" datasource="#DBsource#">
SELECT ltrim(rtrim(CUSTOMER.SVC_CODE)) as svc_code,
ltrim(rtrim(CUSTOMER.ATTN)) as attn,
ltrim(rtrim(CUSTOMER.ADDR1)) as addr1,
ltrim(rtrim(CUSTOMER.ADDR2)) as addr2,
ltrim(rtrim(CUSTOMER.CITY)) as city,
ltrim(rtrim(CUSTOMER.STATE)) as state,
ltrim(rtrim(CUSTOMER.ZIP)) as zip,
ltrim(rtrim(CUSTOMER.CONTACT_NAME)) as contact_name,
ltrim(rtrim(CUSTOMER.CONTACT_PHONE)) as contact_phone,
ltrim(rtrim(CUSTOMER.INTL_IND)) as intl_ind,
ltrim(rtrim(CUSTOMER.INTL_ADDR1)) as intl_addr1,
ltrim(rtrim(CUSTOMER.INTL_ADDR2)) as intl_addr2,
ltrim(rtrim(CUSTOMER.CUST_CODE)) as cust_code,
ltrim(rtrim(CUSTOMER.CUST_NAME)) as cust_name,
ltrim(rtrim(CUSTOMER.EMAIL_ADDR)) as email_addr ,
CUSTOMER.INSERTED_DATE,
CUSTOMER.UPDATED_DATE
FROM CUSTOMER
ORDER BY svc_code,
cust_code
</cfquery>

<!--- Query to populate the svc_code dropdown ... --->
<cfquery name="drpdwn_svc_code_qry" datasource="#DBsource#">
SELECT ltrim(rtrim(SERVICE.SVC_CODE)) as svc_code,
ltrim(rtrim(SERVICE.CUST_CODE)) as cust_code
FROM MIBS.SERVICE
ORDER BY cust_code
</cfquery>

CF CODE

<form name="customeraddform" method="post">
<table width="100%" align="center" cellpadding="2" cellspacing="2">
<!--- To implement ADD and EDIT mode on the same screen, 3 controls have been used for the cust_code field --->
<!--- Depending on what mode the screen is in, it can be either a text box or an image or a dropdown --->
<tr align="left">
<th width="15%" align="right">Cust&nbsp;Code</th>
<td style="position: relative; width: 400px">
<input id="combotext" type="text" name="custcode_text" maxlength="11" onmouseover="custcodeFocus()" onkeydown = "enableAdd()" onkeypress="return NumericOnly(event);return noQuotes(event)" style="font-family: MS Sans Serif; font-size: 14px; width: 100%; position: absolute">

<img id="comboimage" style="position: absolute; left: 400px" src="/<cfoutput>#Images#</cfoutput>/ComboArrow.jpg" onmouseover="showSelect()">

<select id="comboselect" name="cust_code" onchange="popText();findSelectedIndex()" onmouseout="showText()" style="position: absolute; width: 416px; display: none;
font-family: MS Sans Serif; font-size: 14px">
<option value="">
<cfoutput query="available_customer_qry">
<option value="#cust_code#">#cust_code# - #cust_name#
</cfoutput>
</select>
</td>
</tr>

<tr align="left">
<th width="15%" align="right">Svc&nbsp;Code</th>
<td style="position: relative; width: 400px">
<select name="svc_code">
<option value="">
<cfoutput query="drpdwn_svc_code_qry">
<option value="#svc_code#">#svc_code#
</cfoutput>
</select>
</td>
</tr>

JAVASCRIPT CODE

function findSelectedIndex()
{
changeFormValues(document.customeraddform.cust_code.selectedIndex);
}

/* Based on the value selected in the cust_code dropdown, display the rest of the field values from
the table for the selected cust_code */
function changeFormValues(ind)
{
document.customeraddform.custcode_text.value = customerInfo[ind].cust_code;
document.customeraddform.cust_name.value = customerInfo[ind].cust_name;
document.customeraddform.attn.value = customerInfo[ind].attn;

/*alert(customerInfo[ind].intl_ind);
alert(customerInfo[ind].cust_name);

var ind=customerInfo[ind].intl_ind;*/


/*if intl_ind is 1, then the checkbox for intl_ind should be checked
if (ind == '1')
{
document.customeraddform.intl_ind.checked = TRUE
}
if intl_ind is 0, then the checkbox for intl_ind should be unchecked
if (ind == '0')
{
document.customeraddform.intl_ind.checked = FALSE
}*/

document.customeraddform.city.value = customerInfo[ind].city;
document.customeraddform.state.value = customerInfo[ind].state;
document.customeraddform.zip.value = customerInfo[ind].zip;
document.customeraddform.contact_name.value = customerInfo[ind].contact_name;
document.customeraddform.contact_phone.value = customerInfo[ind].contact_phone;
document.customeraddform.email.value = customerInfo[ind].email_addr;

/*if intl_ind is 1, then it is an international address that need to be displayed
if (ind EQ '1')
{
alert('1111111');
document.customeraddform.addr1.value = customerInfo[ind].intl_addr1;
document.customeraddform.addr2.value = customerInfo[ind].intl_addr2;
}
if intl_ind is 0, then it is the local address that need to be displayed
if (customerInfo[ind].intl_ind == '0')
{
document.customeraddform.addr1.value = customerInfo[ind].addr1;
document.customeraddform.addr2.value = customerInfo[ind].addr2;
}*/
}


Now, my question is how can I populate the svc_code dropdown when the value is selected from the cust_code dropdown using the function changeformvalues function (as defined above).

Please help. I can provide you more info, if needed.

 

[webmigit]

This is not the answer to your question but it would seem this code would be faster than your current big query..

<cfquery name="available_customer_qry" datasource="#DBsource#">
SELECT trim(CUSTOMER.SVC_CODE) as svc_code,
trim(CUSTOMER.ATTN) as attn,
trim(CUSTOMER.ADDR1) as addr1,
trim(CUSTOMER.ADDR2) as addr2,
trim(CUSTOMER.CITY) as city,
trim(CUSTOMER.STATE) as state,
trim(CUSTOMER.ZIP) as zip,
trim(CUSTOMER.CONTACT_NAME) as contact_name,
trim(CUSTOMER.CONTACT_PHONE) as contact_phone,
trim(CUSTOMER.INTL_IND) as intl_ind,
trim(CUSTOMER.INTL_ADDR1) as intl_addr1,
trim(CUSTOMER.INTL_ADDR2) as intl_addr2,
trim(CUSTOMER.CUST_CODE) as cust_code,
trim(CUSTOMER.CUST_NAME) as cust_name,
trim(CUSTOMER.EMAIL_ADDR) as email_addr ,
CUSTOMER.INSERTED_DATE,
CUSTOMER.UPDATED_DATE
FROM CUSTOMER
ORDER BY svc_code,
cust_code
</cfquery>

ALFII.com

http://www.alfii.com

---------------------
If this post answered or helped to answer your question, please reply with such so that forum members with a similar question will know to use this advice.

 

[msng]

webmigit:

thanks for your suggestion. Will fix my code accordingly.

However, I am hoping somebody can help me. I have reached a stage where I cannot proceed with my coding.

Any help will be appreciated.

 

[dallasweb]

You can use twoselectsrelated.cfm by including if in you web root and reference it using cfmodule....like this:

<!--- first create your attributes collection --->
<cfset attrCollection1 = StructNew()>
<cfset attrCollection1.Name1="location">
<cfset attrCollection1.Name2="room">
<cfset attrCollection1.Query="Location">
<cfset attrCollection1.Value1="LPK">
<cfset attrCollection1.Value2="RPK">
<cfset attrCollection1.Display1="ltitle">
<cfset attrCollection1.Display2="description">
<cfset attrCollection1.HTMLBETWEEN="<BR>">
<cfset attrCollection1.Default1="0">
<cfset attrCollection1.Default2="0">
<cfset attrCollection1.ForceWidth2="20">
<cfset attrCollection1.ExtraOptions2="5">
<cfset attrCollection1.EMPTYTEXT1="------- Choose a Location">
<cfset attrCollection1.EMPTYTEXT2="------- Choose a Room">
<cfset attrCollection1.MESSAGE1="You must select a Location">
<cfset attrCollection1.MESSAGE2="You must select a Room">
<cfset attrCollection1.FORMNAME="form2">
<!--- then call the custom tag --->
<cfmodule template="TwoSelectsRelated.cfm" Attributecollection=#attrCollection1#>

You'll need to change the attributes, here I use a query and populate select one with location, then when you choose, select two is populated with rooms for that locale.

Good luck

 

[msng]

dallasweb:

The way my code is, CF_TwoSelectsRelated does not work for me.
However , I have the following question:

We have a table CUSTOMER where the cust_code/svc_code combination form the primary key.

I have a query as follows:

select cust_code,svc_code
from customer
order by cust_code

Using Javascript, is it possible to store all the values of cust_code and svc_code in a 2-D array and if I have a given value of cust_code, then get all the values of svc_code from this 2-D array and populate the dropdown box for svc_code with these values.