Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Form Dynamic "select" 1

Status
Not open for further replies.
OldWilly

OldWilly

Programmer
Mar 1, 2002
66
Pleae forgive me if I'm posting to the wrong forum. I know a little ColdFusion but absolutely nothing about JavasScript.

I have a lengthy form, part of which is the standard input..
name, address, city, state, zip + a whole bunch more.
My client now wants a "county" select box. I have an MSSQL 2000 County table which contains all 3,000+ counties.
What I would like to do is to take the "state" selected
and read the database and then populate it to my "county" select box. That way I would have just the counties for the selected state rather than all 3000. I know how to do a cfquery but have no idea how to do the query in JS and then be able to retrieve the elements. Does anyone have a simple working example of this so I could modify it to my own needs?
 
Sort by date Sort by votes
first write a query to get the states with the countries.
here is the code i wrote that pulls the page ids, pagenames depending on the campaigns chosen. just replace the vars with yours.


<script>
var arZone = new Array;
<cfoutput query="getCampaignPages">
var oZone = new Object;
oZone.campaignID = "#campaignID#";
oZone.pageID = "#pageID#";
oZone.pageName = "#pageName#";
arZone[arZone.length] = oZone;
</cfoutput>
function popPage(v1)
{
document.sourceIDGen.selectPage.options.length = 0;
for (var i=0; i<arZone.length; i++)
{
if ( arZone.campaignID == v1)
{
var objOption = new Option(arZone.pageName, arZone.pageID);
with (document.sourceIDGen.selectPage)
{
options[options.length] = objOption;
}
}
}
document.getElementById("campaign").innerHTML = document.sourceIDGen.selectCampaign[document.sourceIDGen.selectCampaign.selectedIndex].value;
document.getElementById("landingPage").innerHTML = document.sourceIDGen.selectPage[document.sourceIDGen.selectPage.selectedIndex].value;

}
</script>


then ...

<select name="selectCampaign" size="1" onChange="popPage(this.value)">
<option value="-">*** Select One ***</option>
<cfoutput query="getCampaignPages">
<option value="#CampaignID#">#CampaignID# - #CampaignName#</option>
</cfoutput>
</select>&nbsp;


finally, you will have another select with pages - in your case states.

 
Upvote 0 Downvote
enclosed is the result of me butchering your code.
(obviously I don't have a clue what I'm doing)

I would prefer to do the query within the function so I would be reading in 50 counties rather than 3000.

SELECT * FROM Counties
WHERE state = '#state#'
ORDER BY County
(it's a lot faster... but I'll gratefully take what I can get)

Here's the code I've mangled so far. It doesn't break, but it does list the counties for all 50 states not what I want)

<head>
<CFQUERY NAME="getCampaignPages" DATASOURCE="#DSN#" USERNAME="#DSNUSER#" PASSWORD="#DSNPASS#">
SELECT * FROM Counties
ORDER BY state, county
</cfquery>
<!--- oZone.pageName = "#pageName#"; --->

<script language="JavaScript">
var arZone = new Array;
<cfoutput query="getCampaignPages">
var oZone = new Object;
oZone.campaignID = "#state#";
oZone.pageID = "#county#";
arZone[arZone.length] = oZone;
</cfoutput>
function popPage(v1)
{
document.sourceIDGen.selectPage.options.length = 0;
for (var i=0; i<arZone.length; i++)
{
if ( arZone.campaignID == v1)
{
var objOption = new Option(arZone.campaignID, arZone.pageID);
with (document.sourceIDGen.selectPage)
{
options[options.length] = objOption;
}
}
}
document.getElementById("campaign").innerHTML = document.sourceIDGen.selectCampaign[document.sourceIDGen.selectCampaign.selectedIndex].value;
document.getElementById("form.new.county").innerHTML = document.sourceIDGen.selectPage[document.sourceIDGen.selectPage.selectedIndex].value;

}
</script>
</head>
<body>
<form action="01post.cfm" name="new" onChange="popPage(this.state)">
<cfoutput>
Select State&nbsp;&nbsp;
<select name="state">
<OPTION VALUE=""> Select One</option>
<cfloop index="x" from="1" to="#ListLen(stateprovcode)#">
<cfset stnam = ListGetAt(stateprovname,x)>
<cfset stabr= ListGetAt(stateprovcode,x)>
<OPTION VALUE="#stabr#"> #stnam#</option>
</cfloop>
</select>
</cfoutput>
&nbsp;&nbsp;&nbsp;Select County&nbsp;&nbsp;
<select name="county">
<OPTION VALUE=""> Select One</option>
<cfoutput query="getCampaignPages">
<OPTION VALUE="#county#">#state# #county#</option>
</cfoutput>
</select>
</form>
</body>

This can be run on Thanks for your help, Bill billpontius@verizon.net
 
Upvote 0 Downvote
oh, yeesss, please post the code and I'll see if I can make it fit. Thank you.
 
Upvote 0 Downvote
<cfquery name="getStates" datasource="mydatasource">
SELECT stateID, state
FROM state
ORDER BY state
</cfquery>
<cfquery name="getCounties" datasource="mydatasource">
SELECT countyID, stateID, countyName
FROM county
ORDER BY countyName
</cfquery>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Related Selects</title>
<script language="javascript" type="text/javascript">
var arZone = new Array;
<cfoutput query="getCounties">
var oZone = new Object;
oZone.stateID = #stateID#;
oZone.countyID = #countyID#;
oZone.countyName = "#countyName#";
arZone[arZone.length] = oZone;
</cfoutput>
function popPage(v1)
{
document.form1.selectCounty.options.length = 0;
for (var i=0; i<arZone.length; i++)
{
if ( arZone.stateID == v1)
{
var objOption = new Option(arZone.countyName, arZone.countyID);
with (document.form1.selectCounty)
{
options[options.length] = objOption;
}
}
}
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<p>select the state :
<select name="selectState" onChange="popPage(this.value)">
<option value="-">*** Select One ***</option>
<cfoutput query="getStates">
<option value="#stateID#">#state#</option>
</cfoutput>
</select>
</p>
<p>select the county:
<select name="selectCounty">
<option value="*">-- Pick a State First --</option>
</select>
</p>
<p>&nbsp; </p>
</form>
</body>
</html>


 
Upvote 0 Downvote
check this out: It runs but does not populate the selectCounty select box.
If you view the source, all the arrays appear to be there.
Here's my updated code (I had to change some of the variable names to mesh with my DB)

<cfquery name="getCounties" DATASOURCE="#DSN#" USERNAME="#DSNUSER#" PASSWORD="#DSNPASS#">
SELECT countyID, state, county
FROM Counties
ORDER BY state, county
</cfquery>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Related Selects</title>
<script language="javascript" type="text/javascript">
var arZone = new Array;
<cfoutput query="getCounties">
var oZone = new Object;
oZone.countyID = #countyID#;
oZone.state = #state#;
oZone.county = "#county#";
arZone[arZone.length] = oZone;
</cfoutput>
function popPage(v1)
{
document.form1.selectCounty.options.length = 0;
for (var i=0; i<arZone.length; i++)
{
if ( arZone.state == v1)
{
var objOption = new Option(arZone.county, arZone.countyID);
with (document.form1.selectCounty)
{
options[options.length] = objOption;
}
}
}

}
</script>
</head>

<body>
<cfoutput>
<form name="form1" method="post" action="01post.cfm">
<p>select the state :
<select name="selectState" onChange="popPage(this.value)">
<OPTION VALUE=""> Select One</option>
<cfloop index="x" from="1" to="#ListLen(stateprovcode)#">
<cfset stnam = ListGetAt(stateprovname,x)>
<cfset stabr= ListGetAt(stateprovcode,x)>
<OPTION VALUE="#stabr#"> #stnam#</option>
</cfloop>
</select>
</p>
<p>select the county:
<select name="selectCounty">
<option value="*">-- Pick a State First --</option>
</select>
</p>
<p><input type="Submit" value="Submit"</p>
<p>&nbsp; </p>
</form>
</cfoutput>
</body>
</html>
 
Upvote 0 Downvote
you need to tie the counties to states by StateID. So, either you will need to change your dB or change how the javascript arrays are made.

Also, you are using a variable called #stabr# in your first select list.When you output your query, is #stabr# as same as state? My guess is probably not.

First, change the <OPTION VALUE="#stabr#"> to <OPTION VALUE="#state#"> and then try.

 
Upvote 0 Downvote
voila !! Your post gave me the hint I needed.
I changed oZone.state = #state#; to
oZone.state = "#state#"; (with the double quotes around it, it worked). Try it out! Thank you so much for your help.
I owe you a couple cold ones for sure.

In your opinion, would this page load faster if I already had the arrays built? (like in a js file that I could import).

Thanks again...
 
Upvote 0 Downvote
yes it is much faster.

One more question please ...
How do I keep the option

<option value="*">-- Pick a State First --</option>

on top of the list? This will force a user to open the box and choose one. As it is if the user didn't choose, he would get the first county in the list assigned to him.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lwfg
  • Locked
  • Question
getting form values from ColdFusion programn to asp.net program
Replies
2
Views
309
LyndonOHRC
LyndonOHRC
hifispin2015
  • Locked
  • Question
Creating a slect all button for A Multiple Slect HTML Form Field
Replies
1
Views
284
LyndonOHRC
LyndonOHRC
ScarletJake
  • Locked
  • Question
Parts List with Dynamic Callouts on Drawings
Replies
0
Views
179
ScarletJake
ScarletJake
JaniseD
  • Locked
  • Question
CF Multi-Select Box Not Displaying Values Passed From Grid?
Replies
1
Views
231
JaniseD
JaniseD
clearwave
  • Locked
  • Question
Timesheet entry form that auto-fills the Date range?
Replies
4
Views
334
clearwave
clearwave

Part and Inventory Search

Sponsor

Back
Top