Solved

Dynamically change state and city drop-down boxes using coldfusion and ajax

Posted on 2009-05-09
14
2,735 Views
Last Modified: 2013-12-24
Hi i want that i select one city and in another drop down the cities of that state should be populated automatically.

please also guide me how i make the database of city and state and link them in my users table.

Please Guide me
0
Comment
  • 7
  • 4
  • 3
14 Comments
 
LVL 4

Accepted Solution

by:
galadore earned 500 total points
ID: 24344808
Here's a link to a blog post on the same topic:
http://coldfusion.dzone.com/articles/multi-selects-related-cfajaxpr

Alternatively, it can be done without ajax altogether.  Search for 'coldfusion two selects related'  for methods of using a custom tag.  Essentially, you just populate javascript arrays using a query and onchange for the first one, the second autopopulates.  I've attached a Three Selects Related script I used a few years ago.
HTML FILE:

------------------------------------------------------------

<H2>&lt;CF_ThreeSelectsRelated&gt;</H2>
 

<I>See also CF_TwoSelectsRelated.</I>

Puts three SELECT form elements onto the current page, which contain choices from any query.

The three SELECTs are related -- when the user chooses an item from the first SELECT, the items

from the second SELECT are "filled" with corresponding items for the user to choose from.  Then, 

when the user chooses an item from the second SELECT, the items

from the third SELECT are "filled" with corresponding items for the user to choose from.

Also, the first select can be as a series of RADIO boxes instead of a SELECT if you wish.
 
 

<P>Should work under Javascript 1.1 compliant browsers (which means Navigator 3.0 and up, and IE4.0 and up).

Will not with other browsers.
 

<P><B>Parameters</B><BR>

NOTE: Most of the parameters come in threes (for instance, NAME1, NAME2, NAME3).  The first

parameter affects the first SELECT list, and the "2" parameter affects the second SELECT list, etc.

Depending on whether you count each of these triplets as one parameter or three, I think 

this tag may actually have beat the fearsome CFGRID tag for number of parameters!
 

<P>
 

<TABLE BORDER>

  <TR VALIGN="TOP"><TD>QUERY</TD>

	  <TD>

		  Required.  

			The name of the query from which the SELECT elements will be populated.  

			The query is probably generated by a CFQUERY tag, but could also be generated by other Cold Fusion tags that return query result sets.

		</TD></TR>
 

  <TR VALIGN="TOP"><TD>NAME1,<BR>NAME2<BR>NAME3</TD>

	  <TD>

		  The names of the SELECT list elements to be included on the form.

			The SELECT element with NAME1 will appear first on the page, and the one with NAME2 will be second, etc.

			For instance, if you use NAME2="Selection", then whatever the user chooses in the second SELECT will

			be available to for your use as #Form.Selection# in the next template.

			If omitted, NAME1 will be TwoSelectsRelated1 and NAME2 will be TwoSelectsRelated2, etc.

		</TD></TR>
 

  <TR VALIGN="TOP"><TD>DISPLAY1,<BR>DISPLAY2<BR>DISPLAY3</TD>

	  <TD>

		  Required.  

			The columns in QUERY that will populate the SELECT elements.  

			This is what the user sees on the page.
 

		</TD></TR>
 

  <TR VALIGN="TOP"><TD>VALUE1,<BR>VALUE2<BR>VALUE3</TD>

	  <TD>

		  The columns in QUERY that provide the values for the second SELECT element when submitted.  

			If omitted, the column you supply for DISPLAY is used.  

			Provide this parameter if, for instance, you wanted a category "code" to be submitted to the next Cold Fusion template,

			but want the user to be able to choose the category by its friendly DISPLAY name.
 

      <P>

			It is critical that the query's results be sorted by the column you specify for VALUE1, then the column you specify for VALUE2.

			So, if for example you specify DISPLAY1="CustomerID" and DISPLAY2="OrderID" for this tag, you must have

			<I>ORDER BY CustomerID, OrderID</I> in the CFQUERY you specified in QUERY.

			(If you find this confusing, see the <A HREF="http://www.allaire.com/products/coldfusion/documents/CF31UserGuide/user/ug040014.htm#I2">CF Documentation that explains</A> the GROUP

			parameter of the CFOUTPUT tag--the theory is the same.)

		</TD></TR>
 

  <TR VALIGN="TOP"><TD>DEFAULT1,<BR>DEFAULT2,<BR>DEFAULT3</TD>

	  <TD>

		  Optional.  Values that determine which items in the SELECT lists are pre-selected when the web page appears.

			So, if VALUE1="CustomerID" and DEFAULT1="5", then first SELECT will appear with Customer 5 pre-selected.

		</TD></TR>
 

  <TR VALIGN="TOP"><TD>MULTIPLE3</TD>

	  <TD>

		  Optional.  Yes or No.  If MULTIPLE3="YES", then the user can choose more than one

			item from the third SELECT list (by holding down the Ctrl key in Windows, and some other strange key on the Mac... I think it's an iconic representation of Steve Jobs' head or something).

			

			<P>Note that there is no MULTIPLE1 or MULTIPLE2 (this would be hard... maybe next time around).

		</TD></TR>
 

  <TR VALIGN="TOP"><TD>TYPE1</TD>

	  <TD>

		  Optional.  RADIO or SELECT.  If omitted, the default is SELECT.

			If TYPE1="RADIO", the first SELECT will be rendered as a series of Radio buttons rather than a SELECT list.

			In such a case, WIDTH1, SIZE1, FORCEWIDTH1, and EMPTYTEXT1 are all ignored.
 

      <P>Note that there is no TYPE2 or TYPE3.

		</TD></TR>
 

  <TR VALIGN="TOP"><TD>SIZE1,<BR>SIZE2<BR>SIZE3</TD>

	  <TD>

		  Just like the SIZE attribute of a normal SELECT form element.

			If omitted, the default is 1, which makes the SELECT appear as a "drop-down list".

			

			<P>Instead of supplying a number, you can also supply the word "Auto".

			If SIZE1="Auto", the first select will be the same size as the number of options it has (no scrollbars).

			If SIZE2="Auto", the second select will be the same size as the first select.

			

			<P>SIZE1 has no effect if TYPE1="RADIO".

		</TD></TR>
 

  <TR VALIGN="TOP"><TD>WIDTH1,<BR>WIDTH2<BR>WIDTH3</TD>

	  <TD>

		  The width of the SELECT element, using CSS measurement syntax.

			For instance, WIDTH1="150px" would make the first SELECT be 150 pixels wide.

			As of this writing, IE4 is the only browser that "obeys" this width.
 

			<P>WIDTH1 has no effect if TYPE1="RADIO".

		</TD></TR>
 

  <TR VALIGN="TOP"><TD>FORCEWIDTH1,<BR>FORCEWIDTH2,<BR>FORCEWIDTH3</TD>

	  <TD>

      For browsers that don't obey WIDTH, you can use FORCEWIDTH to control the width of the SELECT

			boxes, although with somewhat less precision.  Each SELECT element will have an "empty" OPTION at the bottom...

			the number you supply for FORCEWIDTH causes the "display text" of this last OPTION to be "padded" with nonbreakingspace characters.

			So FORCEWIDTH="30" causes the SELECT to be at least 30 spaces wide... how wide that actually is depends on the font the browser uses to display the SELECT.

			Also, if any of the items in DISPLAY are "wider" than SIZE number of spaces, then the SELECT will be that wide instead.
 

			<P>FORCEWIDTH1 has no effect if TYPE1="RADIO".

		</TD></TR>
 

  <TR VALIGN="TOP"><TD>FORCEWIDTHCHAR</TD>

	  <TD>

      If you want to use some other character than nonbreaking spaces for FORCEWIDTH (above), specify that character here.

			So FORCEWIDTHCHAR="=" would cause the last OPTION in the SELECT to be "padded" with 30 = signs instead of 30 spaces, etc.
 

  <TR VALIGN="TOP"><TD>EMPTYTEXT1,<BR>EMPTYTEXT2,<BR>EMPTYTEXT3</TD>

	  <TD>

      If you want to force the user to make a choice from one of the SELECT elements, provide a short message here.

			The text you supply will appear as the first choice in the corresponding SELECT element.  For instance, you might use EMPTYTEXT1="(choose a category)"

			so that the user will be compelled to click on something to proceed.
 

			<P>EMPTYTEXT1 has no effect if TYPE1="RADIO".

			

  <TR VALIGN="TOP"><TD>EXTRAOPTIONS2,<BR>EXTRAOPTIONS3</TD>

	  <TD>

      Netscape browsers tend to act strangely when the number of options in a SELECT list changes after the web page appears,

			and the SIZE of the SELECT is 1.  Instead of making the drop-down list be long enough to hold the options, the drop-down list retains its original length.  So if there is only one or two options in the SELECT when the page first appears, tiny scroll bars are forced to appear in the drop-down list, which look kind of silly.

			To get around this, you can supply a number here--that number of empty options will be added to the SELECT lists when

			the web page is first displayed.  So if SIZE2="1" and you know that the number of choices in the second select will 

			be small when the form appears, and the number of choices is likely to get bigger as the user interacts with the form, then

			you may want to add an EXTRAOPTIONS2="5" parameter to assure that the second select behaves intuitively.
 

			<P>Note that there is no EXTRAOPTIONS1.

			

  <TR VALIGN="TOP"><TD>MESSAGE1,<BR>MESSAGE2,<BR>MESSAGE3</TD>

	  <TD>

		  You can demand that the user pick an item from a SELECT box before proceeding. 

			If they do not pick an item, they cannot submit the form.  Also, if the item they choose

			has no value (if the value you supplied for the VALUE parameter is blank or null), they cannot submit the form.

			This means that the extra item generated by	the EMPTYTEXT or FORCEWIDTH choices do not "count" as a choice.

			

			<P>To make input be required, add a javascript onSubmit handler to the FORM tag that this tag is in.

			The syntax is <B>onSubmit="return require_Name1()"</B> (where Name1 is whatever you supplied for NAME1 in this tag). See example below.

			To make the first and select boxes be required, use onSubmit="return require_Name1AndName2()".

			To make all three be required, use onSubmit="return require_Name1AndName2AndName3()".

			<B>The text inside the quotes for these onSubmit items is Javascript, so it's case sensitive!</B>

	

      <P>If you want a custom message to appear to the user when they are not allowed to proceed, provide

			that text here as MESSAGE1, MESSAGE2, or MESSAGE3.  Otherwise, the default message will be used:

			"You must choose an option for <I>NAME</I>."

		</TD></TR>
 

  <TR VALIGN="TOP"><TD>HTMLAFTER1,<BR>HTMLAFTER2</TD>

	  <TD>

		  Insert any HTML code that you want to be output between the first and sencond SELECTs (for instance, a &lt;BR&gt; tag to put a line break between them) for HTMLAFTER1.  

			If omitted, the second select will appear directly to the right of the first.  Same with HTMLAFTER2.

		</TD></TR>
 

  <TR VALIGN="TOP"><TD>HTMLAFTEREACHRADIO1</TD>

	  <TD>

		  If TYPE1="RADIO", you can insert any HTML code that you want to be output after each RADIO button that is generated onto your form.

			For instance, HTMLAFTEREACHRADIO1="&lt;BR&gt;" would cause each Radio button to appear on a new line, with the radio buttons themselves neatly aligned.

		</TD></TR>
 

  <TR VALIGN="TOP"><TD>ONCHANGE</TD>

	  <TD>

		  You can put any Javascript code that want to execute when the user makes a selection from the third SELECT in here...

			it will be passed directly through to the onChange handler of the second SELECT tag itself.

			For instance, <FONT SIZE="-1"><XMP>ONCHANGE="alert('You picked '+this.options[this.options.selectedIndex].text)"</XMP></FONT> would display a dialog box to the user when they made their selection.

			Keep in mind that this is Javascript code you're providing here, which means that it's case-sensitive.

			<P>

			There are two "magic" values that you can supply for ONCHANGE as "shortcuts" to writing this kind of javascript code yourself:

			<LI>

			ONCHANGE="Submit!" will cause the form to be submitted automatically when the user makes a selection.

			Use this when you don't want to make the user click a Submit button to submit the form.

			<LI>

			ONCHANGE="Jump!" will cause the current window's URL to change to the value of the second select item.

			When you use this, it's assumed that the column you specified for VALUE2 has URLs in it, otherwise you will most likely get a "Not Found" type of error in your browser.

		</TD></TR>
 

  <TR VALIGN="TOP"><TD>AUTOSELECTFIRST</TD>

	  <TD>

		  YES or NO (default is YES).  

			If YES, then when the user selects an item from the second SELECT, the first item of 

			the third SELECT is selected automatically.  In general, you will want to use AUTOSELECTFIRST="YES"

			when SIZE3="1" and NO when SIZE3 is greater than 1.  Try it out... it's easier to see than to explain.

		</TD></TR>
 

  <TR VALIGN="TOP"><TD>FORMNAME</TD>

	  <TD>

      The name (as specified in the NAME parameter of the FORM tag) of the form that this CF_TwoSelectsRelated tag is in.

			If omitted, defaults to <NOBR>FORMNAME="forms[0]"</NOBR>, which will be fine unless there is another form on the same page

			above the current form.  Note that form names are case-sensitive as far as javascript is concerned, so if you supply

			this parameter, make sure that the capitalization matches the FORM's NAME parameter exactly, or else all sorts of javascript errors will occur.

		</TD></TR>
 

</TABLE>		
 
 

<P><B>Examples</B><BR>

The following examples assume that the this CFQUERY tag has been run first.

The sample data I'm using in these examples is shown under the query.

<XMP>

<CFQUERY NAME="GetData" DATASOURCE="A2Z">

  SELECT Customers.CustomerID, Customers.Company, Category.ID, Category.Category, Inventory.BookID, Inventory.Title

  FROM Category, Customers, Inventory, OrderItems, Orders

  WHERE Category.ID = Inventory.CategoryID AND OrderItems.BookID = Inventory.BookID AND Orders.OrderID = OrderItems.OrderID AND Customers.CustomerID = Orders.CustomerID

  ORDER BY Customers.CustomerID, Category.ID

</CFQUERY>

</XMP>

<TABLE  ><TR><TH><FONT SIZE=-1>CUSTOMERID </TH><TH><FONT SIZE=-1>COMPANY </TH><TH><FONT SIZE=-1>ID </TH><TH><FONT SIZE=-1>CATEGORY </TH><TH><FONT SIZE=-1>BOOKID </TH><TH><FONT SIZE=-1>TITLE </TH></TR><TR><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>ABC Company</TD><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>Literature</TD><TD><FONT SIZE=-1>10</TD><TD><FONT SIZE=-1>Sabbath's Theater</TD></TR><TR><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>ABC Company</TD><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>Literature</TD><TD><FONT SIZE=-1>9</TD><TD><FONT SIZE=-1>The Dead Father</TD></TR><TR><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>ABC Company</TD><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>Literature</TD><TD><FONT SIZE=-1>8</TD><TD><FONT SIZE=-1>The Armies Of The Night</TD></TR><TR><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>ABC Company</TD><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>Humor</TD><TD><FONT SIZE=-1>4</TD><TD><FONT SIZE=-1>Life, the Universe and Everything</TD></TR><TR><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>ABC Company</TD><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>Humor</TD><TD><FONT SIZE=-1>3</TD><TD><FONT SIZE=-1>The Restaurant at the End of the Universe</TD></TR><TR><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>ABC Company</TD><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>Humor</TD><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>The Hitchhiker's Guide to the Galaxy</TD></TR><TR><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>ABC Company</TD><TD><FONT SIZE=-1>3</TD><TD><FONT SIZE=-1>Computers</TD><TD><FONT SIZE=-1>5</TD><TD><FONT SIZE=-1>The Cold Fusion Web Database Construction Kit</TD></TR><TR><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>ABC Company</TD><TD><FONT SIZE=-1>3</TD><TD><FONT SIZE=-1>Computers</TD><TD><FONT SIZE=-1>7</TD><TD><FONT SIZE=-1>Using ASP For Unknown Reasons</TD></TR><TR><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>DEF Company</TD><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>Literature</TD><TD><FONT SIZE=-1>11</TD><TD><FONT SIZE=-1>Tabloid Dreams</TD></TR><TR><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>DEF Company</TD><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>Literature</TD><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>Moby Dick</TD></TR><TR><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>DEF Company</TD><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>Humor</TD><TD><FONT SIZE=-1>4</TD><TD><FONT SIZE=-1>Life, the Universe and Everything</TD></TR><TR><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>DEF Company</TD><TD><FONT SIZE=-1>3</TD><TD><FONT SIZE=-1>Computers</TD><TD><FONT SIZE=-1>6</TD><TD><FONT SIZE=-1>Special Edition Using Windows NT Server 4</TD></TR><TR><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>DEF Company</TD><TD><FONT SIZE=-1>3</TD><TD><FONT SIZE=-1>Computers</TD><TD><FONT SIZE=-1>5</TD><TD><FONT SIZE=-1>The Cold Fusion Web Database Construction Kit</TD></TR></TABLE>
 
 
 
 

<P><B>Example 1</B>
 

<XMP><FORM ACTION="TestTwoSelectsRelatedGo.cfm" METHOD="POST" onSubmit="return require_Sel1AndSel2AndSel3()">
 

<CF_ThreeSelectsRelated

  QUERY="GetData"

  HTMLAFTER2="<BR>"

  NAME1="Sel1"

  NAME2="Sel2"

  NAME3="Sel3"

  VALUE1="CustomerID"

  VALUE2="ID"

  VALUE3="BookID"

  DISPLAY1="Company"

  DISPLAY2="Category"

  DISPLAY3="Title"

  DEFAULT1="1"

  SIZE1="3"

  SIZE2="3"

  SIZE3="5"

  WIDTH1="150"

  WIDTH2="150"

  WIDTH3="300"

  FORCEWIDTH1="40"

  FORCEWIDTH2="40"

  FORCEWIDTH3="90"

  AUTOSELECTFIRST="No"

  MULTIPLE3="Yes">
 

<BR><INPUT TYPE="Submit">

 

</FORM>

</XMP>
 
 
 
 

<FORM ACTION="TestThreeSelectsRelatedGo.cfm" METHOD="POST" onSubmit="return require_Select1AndSelect2AndSelect3()">
 
 

	<SCRIPT LANGUAGE="JavaScript1.1">

	  // javascript code generated by the CF_TwoSelectsRelated Cold Fusion tag (Nate Weiss, 4/98)

		// portions adapted from Nick Heinle's code at http://webreference.com/javascript/960902/select_boxes.html

	  var maxlength = 10;

	  OneA = new Array;
 

		var trueLength = OneA.length;  

		var lst = OneA.length;

    var Trak = 0;
 

    function require_Select1() {

		  with (document.forms[0].Select1) {

			  RetVal = true;

			  if (Trak == -1) RetVal = false; 

				  

				  else RetVal = !(options[Trak].value == '');

					

			  if (!RetVal) alert('You must choose an option for Select1.');

				return RetVal;

			}

		}
 

    function require_Select2() {

		  with (document.forms[0].Select2) {

			  RetVal = true;

			  if (selectedIndex == -1) RetVal = false;

				  else RetVal = !(options[selectedIndex].value == '');

			  if (!RetVal) alert('You must choose an option for Select2.');

        return eval(RetVal);

				return RetVal;

			}

		}

		

    function require_Select3() {

		  with (document.forms[0].Select3) {

			  RetVal = true;

			  if (selectedIndex == -1) RetVal = false;

				  else RetVal = !(options[selectedIndex].value == '');

			  if (!RetVal) alert('You must choose an option for Select3.');

				return RetVal

			}

		}

		

		function require_Select1AndSelect2() {

		  return ((require_Select1()) && (require_Select2()));

		}
 

		function require_Select2AndSelect3() {

		  return ((require_Select2()) && (require_Select3()));

		}

		

		function require_Select1AndSelect2AndSelect3() {

		  return ((require_Select1AndSelect2()) && (require_Select3()));

		}

				

		function forms0ChangeMenu(menuNum) {

		   OneA.length = 0;

		   if (menuNum == null) return;  

			 Trak = menuNum;

			 

			 

			 if (document.forms[0].Select1.options[menuNum].value == '') return;

			 if (document.forms[0].Select1.options[menuNum].value == null) return;

			 
 

	if (menuNum == 0) {

	  NewOpt = new Array;

		NewVal = new Array;

    

    

		NewOpt[0] = new Option("Literature");	NewOpt[0].value = '1'; NewOpt[1] = new Option("Humor");	NewOpt[1].value = '2'; NewOpt[2] = new Option("Computers");	NewOpt[2].value = '3'; 

	} 
 

	if (menuNum == 1) {

	  NewOpt = new Array;

		NewVal = new Array;

    

    

		NewOpt[0] = new Option("Literature");	NewOpt[0].value = '1'; NewOpt[1] = new Option("Humor");	NewOpt[1].value = '2'; NewOpt[2] = new Option("Computers");	NewOpt[2].value = '3'; 

	} 
 

  tot = NewOpt.length;

	lst = document.forms[0].Select2.options.length;

	for (i = lst; i > 0; i--) {

	  document.forms[0].Select2.options[i] = null;

	}

  for (i = 0; i < tot; i++) {

	  document.forms[0].Select2.options[i] = NewOpt[i];

	}

  

	  document.forms[0].Select2.options[0].selected = true;

	

	forms0ChangeMenu2(0);

}
 

		function forms0ChangeMenu2() {

		   OneA.length = 0;

			 menuNum = Trak;

		   //menuNum = document.forms[0].Select1.selectedIndex;

		   menuNum2 = document.forms[0].Select2.selectedIndex;

		   if (menuNum == -1) return;  

		   if (menuNum2 == null) return;  

			 

			 if (document.forms[0].Select2.options[menuNum2].value == '') return;
 

if (menuNum == 0) {
 
 

	if (menuNum2 == 0) {

	  NewOpt = new Array;

		NewVal = new Array;

    

    

		

		  NewOpt[0] = new Option("Sabbath's Theater");

			NewOpt[0].value = '10';

			

		

		  NewOpt[1] = new Option("The Dead Father");

			NewOpt[1].value = '9';

			

		

		  NewOpt[2] = new Option("The Armies Of The Night");

			NewOpt[2].value = '8';

			

		

	} 
 

	if (menuNum2 == 1) {

	  NewOpt = new Array;

		NewVal = new Array;

    

    

		

		  NewOpt[0] = new Option("Life, the Universe and Everything");

			NewOpt[0].value = '4';

			

		

		  NewOpt[1] = new Option("The Restaurant at the End of the Universe");

			NewOpt[1].value = '3';

			

		

		  NewOpt[2] = new Option("The Hitchhiker's Guide to the Galaxy");

			NewOpt[2].value = '2';

			

		

	} 
 

	if (menuNum2 == 2) {

	  NewOpt = new Array;

		NewVal = new Array;

    

    

		

		  NewOpt[0] = new Option("The Cold Fusion Web Database Construction Kit");

			NewOpt[0].value = '5';

			

		

		  NewOpt[1] = new Option("Using ASP For Unknown Reasons");

			NewOpt[1].value = '7';

			

		

	} 

	

}	
 

if (menuNum == 1) {
 
 

	if (menuNum2 == 0) {

	  NewOpt = new Array;

		NewVal = new Array;

    

    

		

		  NewOpt[0] = new Option("Tabloid Dreams");

			NewOpt[0].value = '11';

			

		

		  NewOpt[1] = new Option("Moby Dick");

			NewOpt[1].value = '1';

			

		

	} 
 

	if (menuNum2 == 1) {

	  NewOpt = new Array;

		NewVal = new Array;

    

    

		

		  NewOpt[0] = new Option("Life, the Universe and Everything");

			NewOpt[0].value = '4';

			

		

	} 
 

	if (menuNum2 == 2) {

	  NewOpt = new Array;

		NewVal = new Array;

    

    

		

		  NewOpt[0] = new Option("Special Edition Using Windows NT Server 4");

			NewOpt[0].value = '6';

			

		

		  NewOpt[1] = new Option("The Cold Fusion Web Database Construction Kit");

			NewOpt[1].value = '5';

			

		

	} 

	

}	
 

  tot = NewOpt.length;

	lst = document.forms[0].Select3.options.length;

	

	for (i = lst; i > 0; i--) {

	  document.forms[0].Select3.options[i] = null;

	}

  for (i = 0; i < tot; i++) {

	  document.forms[0].Select3.options[i] = NewOpt[i];

	}

  

}

</SCRIPT>

<SELECT NAME="Select1" onChange="forms0ChangeMenu(this.selectedIndex)" SIZE="3" STYLE="width:150"><OPTION VALUE="1"  SELECTED>ABC Company<OPTION VALUE="2"  >DEF Company<OPTION VALUE="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SELECT><SELECT NAME="Select2" SIZE="3" onChange="forms0ChangeMenu2(this.selectedIndex)" STYLE="width:150"><OPTION VALUE="1" >Literature<OPTION VALUE="2" >Humor<OPTION VALUE="3" >Computers<OPTION VALUE="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SELECT><BR><SELECT NAME="Select3" SIZE="5" MULTIPLE STYLE="width:300"><OPTION VALUE="10" >Sabbath's Theater<OPTION VALUE="9" >The Dead Father<OPTION VALUE="8" >The Armies Of The Night<OPTION VALUE="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SELECT>
 

 <BR><INPUT TYPE="Submit">

 

</FORM>
 
 
 
 

<P><B>Example 2</B>

<XMP><FORM ACTION="TestThreeSelectsRelatedGo.cfm" METHOD="POST" onSubmit="return require_Sel1AndSel2AndSel3()" NAME="FormX">
 

<CF_ThreeSelectsRelated

  QUERY="GetData"

	TYPE1="Radio"

	HTMLAFTEREACHRADIO1="<BR>"

	HTMLAFTER1=""

	HTMLAFTER2="<BR>"

	NAME1="Sel1"

	NAME2="Sel2"

	NAME3="Sel3"

	DEFAULT1="1"

	DISPLAY1="Company"

	DISPLAY2="Category"

	DISPLAY3="Title"

	VALUE1="CustomerID"

	VALUE2="ID"

	VALUE3="BookID"

	SIZE2="1"

	SIZE3="1"

	EXTRAOPTIONS2="1"

	EXTRAOPTIONS3="5"

	WIDTH2="250"

	WIDTH3="250"

	FORCEWIDTH2="80"

	FORCEWIDTH3="80"

	AUTOSELECTFIRST="Yes"

	FORM="FormX"

	ONCHANGE="Submit!">

 

</FORM>

</XMP>
 
 
 

<FORM ACTION="TestThreeSelectsRelatedGo.cfm" METHOD="POST" onSubmit="return require_Sel1AndSel2AndSel3()" NAME="FormX">
 
 
 

	<SCRIPT LANGUAGE="JavaScript1.1">

	  // javascript code generated by the CF_TwoSelectsRelated Cold Fusion tag (Nate Weiss, 4/98)

		// portions adapted from Nick Heinle's code at http://webreference.com/javascript/960902/select_boxes.html

	  var maxlength = 10;

	  OneA = new Array;
 

		var trueLength = OneA.length;  

		var lst = OneA.length;

    var Trak = 0;
 

    function require_Sel1() {

		  with (document.FormX.Sel1) {

			  RetVal = true;

			  if (Trak == -1) RetVal = false; 

				  

				  else { if (document.FormX.Sel1[Trak].value == '') RetVal = false; else RetVal = true;}

					

			  if (!RetVal) alert('You must choose an option for Sel1.');

				return RetVal;

			}

		}
 

    function require_Sel2() {

		  with (document.FormX.Sel2) {

			  RetVal = true;

			  if (selectedIndex == -1) RetVal = false;

				  else RetVal = !(options[selectedIndex].value == '');

			  if (!RetVal) alert('You must choose an option for Sel2.');

        return eval(RetVal);

				return RetVal;

			}

		}

		

    function require_Sel3() {

		  with (document.FormX.Sel3) {

			  RetVal = true;

			  if (selectedIndex == -1) RetVal = false;

				  else RetVal = !(options[selectedIndex].value == '');

			  if (!RetVal) alert('You must choose an option for Sel3.');

				return RetVal

			}

		}

		

		function require_Sel1AndSel2() {

		  return ((require_Sel1()) && (require_Sel2()));

		}
 

		function require_Sel2AndSel3() {

		  return ((require_Sel2()) && (require_Sel3()));

		}

		

		function require_Sel1AndSel2AndSel3() {

		  return ((require_Sel1AndSel2()) && (require_Sel3()));

		}

				

		function FormXChangeMenu(menuNum) {

		   OneA.length = 0;

		   if (menuNum == null) return;  

			 Trak = menuNum;

			 

			 
 

	if (menuNum == 0) {

	  NewOpt = new Array;

		NewVal = new Array;

    

    

		NewOpt[0] = new Option("Literature");	NewOpt[0].value = '1'; NewOpt[1] = new Option("Humor");	NewOpt[1].value = '2'; NewOpt[2] = new Option("Computers");	NewOpt[2].value = '3'; 

	} 
 

	if (menuNum == 1) {

	  NewOpt = new Array;

		NewVal = new Array;

    

    

		NewOpt[0] = new Option("Literature");	NewOpt[0].value = '1'; NewOpt[1] = new Option("Humor");	NewOpt[1].value = '2'; NewOpt[2] = new Option("Computers");	NewOpt[2].value = '3'; 

	} 
 

  tot = NewOpt.length;

	lst = document.FormX.Sel2.options.length;

	for (i = lst; i > 0; i--) {

	  document.FormX.Sel2.options[i] = null;

	}

  for (i = 0; i < tot; i++) {

	  document.FormX.Sel2.options[i] = NewOpt[i];

	}

  

	  document.FormX.Sel2.options[0].selected = true;

	

	FormXChangeMenu2(0);

}
 

		function FormXChangeMenu2() {

		   OneA.length = 0;

			 menuNum = Trak;

		   //menuNum = document.FormX.Sel1.selectedIndex;

		   menuNum2 = document.FormX.Sel2.selectedIndex;

		   if (menuNum == -1) return;  

		   if (menuNum2 == null) return;  

			 

			 if (document.FormX.Sel2.options[menuNum2].value == '') return;
 

if (menuNum == 0) {
 
 

	if (menuNum2 == 0) {

	  NewOpt = new Array;

		NewVal = new Array;

    

    

		

		  NewOpt[0] = new Option("Sabbath's Theater");

			NewOpt[0].value = '10';

			

		

		  NewOpt[1] = new Option("The Dead Father");

			NewOpt[1].value = '9';

			

		

		  NewOpt[2] = new Option("The Armies Of The Night");

			NewOpt[2].value = '8';

			

		

	} 
 

	if (menuNum2 == 1) {

	  NewOpt = new Array;

		NewVal = new Array;

    

    

		

		  NewOpt[0] = new Option("Life, the Universe and Everything");

			NewOpt[0].value = '4';

			

		

		  NewOpt[1] = new Option("The Restaurant at the End of the Universe");

			NewOpt[1].value = '3';

			

		

		  NewOpt[2] = new Option("The Hitchhiker's Guide to the Galaxy");

			NewOpt[2].value = '2';

			

		

	} 
 

	if (menuNum2 == 2) {

	  NewOpt = new Array;

		NewVal = new Array;

    

    

		

		  NewOpt[0] = new Option("The Cold Fusion Web Database Construction Kit");

			NewOpt[0].value = '5';

			

		

		  NewOpt[1] = new Option("Using ASP For Unknown Reasons");

			NewOpt[1].value = '7';

			

		

	} 

	

}	
 

if (menuNum == 1) {
 
 

	if (menuNum2 == 0) {

	  NewOpt = new Array;

		NewVal = new Array;

    

    

		

		  NewOpt[0] = new Option("Tabloid Dreams");

			NewOpt[0].value = '11';

			

		

		  NewOpt[1] = new Option("Moby Dick");

			NewOpt[1].value = '1';

			

		

	} 
 

	if (menuNum2 == 1) {

	  NewOpt = new Array;

		NewVal = new Array;

    

    

		

		  NewOpt[0] = new Option("Life, the Universe and Everything");

			NewOpt[0].value = '4';

			

		

	} 
 

	if (menuNum2 == 2) {

	  NewOpt = new Array;

		NewVal = new Array;

    

    

		

		  NewOpt[0] = new Option("Special Edition Using Windows NT Server 4");

			NewOpt[0].value = '6';

			

		

		  NewOpt[1] = new Option("The Cold Fusion Web Database Construction Kit");

			NewOpt[1].value = '5';

			

		

	} 

	

}	
 

  tot = NewOpt.length;

	lst = document.FormX.Sel3.options.length;

	

	for (i = lst; i > 0; i--) {

	  document.FormX.Sel3.options[i] = null;

	}

  for (i = 0; i < tot; i++) {

	  document.FormX.Sel3.options[i] = NewOpt[i];

	}

  

	  document.FormX.Sel3.options[0].selected = true;

	

}

</SCRIPT>

<INPUT TYPE="Radio" NAME="Sel1" VALUE="1" CHECKED onClick="FormXChangeMenu(0)">ABC Company<BR><INPUT TYPE="Radio" NAME="Sel1" VALUE="2"  onClick="FormXChangeMenu(1)">DEF Company<BR><SELECT NAME="Sel2" SIZE="1" onChange="FormXChangeMenu2(this.selectedIndex)" STYLE="width:250"><OPTION VALUE="1" >Literature<OPTION VALUE="2" >Humor<OPTION VALUE="3" >Computers<OPTION VALUE="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<OPTION VALUE=""></SELECT><BR><SELECT NAME="Sel3" SIZE="1" STYLE="width:250" OnChange="this.form.submit();"><OPTION VALUE="10" >Sabbath's Theater<OPTION VALUE="9" >The Dead Father<OPTION VALUE="8" >The Armies Of The Night<OPTION VALUE="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<OPTION VALUE=""><OPTION VALUE=""><OPTION VALUE=""><OPTION VALUE=""><OPTION VALUE=""></SELECT>
 

 

</FORM>

-------------------------------------------------------------------

CFM Custom Tag:

-------------------------------------------------------------------

<!--- REMOVE THIS AND FIRST LINE IF NOT USING CF3.1 OR LATER --->

<CFSETTING ENABLECFOUTPUTONLY="YES">
 

<!--- TAG PARAMETERS --->

<CFPARAM NAME="Attributes.Query">  

<CFPARAM NAME="Attributes.Type1" DEFAULT="Select">  

<CFPARAM NAME="Attributes.HTMLAfterEachRadio1" DEFAULT="">  

<CFPARAM NAME="Attributes.Name1" DEFAULT="TwoSelectsRelated1">

<CFPARAM NAME="Attributes.Name2" DEFAULT="TwoSelectsRelated2">

<CFPARAM NAME="Attributes.Name3" DEFAULT="TwoSelectsRelated3">

<CFPARAM NAME="Attributes.Value1">

<CFPARAM NAME="Attributes.Value2">

<CFPARAM NAME="Attributes.Value3">

<CFPARAM NAME="Attributes.Display1" DEFAULT="#Attributes.Value1#">

<CFPARAM NAME="Attributes.Display2" DEFAULT="#Attributes.Value2#">

<CFPARAM NAME="Attributes.Display2" DEFAULT="#Attributes.Value3#">

<CFPARAM NAME="Attributes.Default1" DEFAULT="xxxxxxxxxxxx">

<CFPARAM NAME="Attributes.Default2" DEFAULT="xxxxxxxxxxxx">

<CFPARAM NAME="Attributes.Default3" DEFAULT="xxxxxxxxxxxx">

<CFPARAM NAME="Attributes.Multiple3" DEFAULT="No">

<CFPARAM NAME="Attributes.Size1" DEFAULT="1">

<CFPARAM NAME="Attributes.Size2" DEFAULT="1">

<CFPARAM NAME="Attributes.Size3" DEFAULT="1">

<CFPARAM NAME="Attributes.ExtraOptions2" DEFAULT="">

<CFPARAM NAME="Attributes.ExtraOptions3" DEFAULT="">

<CFPARAM NAME="Attributes.Width1" DEFAULT="">

<CFPARAM NAME="Attributes.Width2" DEFAULT="">

<CFPARAM NAME="Attributes.Width3" DEFAULT="">

<CFPARAM NAME="Attributes.ForceWidth1" DEFAULT="">

<CFPARAM NAME="Attributes.ForceWidth2" DEFAULT="">

<CFPARAM NAME="Attributes.ForceWidth4" DEFAULT="">

<CFPARAM NAME="Attributes.ForceWidthChar" DEFAULT="&nbsp;">

<CFPARAM NAME="Attributes.EmptyText1" DEFAULT="">

<CFPARAM NAME="Attributes.EmptyText2" DEFAULT="">

<CFPARAM NAME="Attributes.EmptyText3" DEFAULT="">

<CFPARAM NAME="Attributes.Message1" DEFAULT="You must choose an option for #Attributes.Name1#.">

<CFPARAM NAME="Attributes.Message2" DEFAULT="You must choose an option for #Attributes.Name2#.">

<CFPARAM NAME="Attributes.Message3" DEFAULT="You must choose an option for #Attributes.Name3#.">

<CFPARAM NAME="Attributes.FormName" DEFAULT="forms[0]">

<CFPARAM NAME="Attributes.HTMLAfter1" DEFAULT="">

<CFPARAM NAME="Attributes.HTMLAfter2" DEFAULT="">

<CFPARAM NAME="Attributes.OnChange" DEFAULT="">

<CFPARAM NAME="Attributes.AutoSelectFirst" DEFAULT="Yes">
 
 

<CFIF Attributes.Type1 is "Radio">

  <CFSET Attributes.EmptyText1 = "">

  <CFSET Attributes.ForceWidth1 = "">

</CFIF>
 
 
 

<CFSET FunctionName = ReplaceList(Attributes.FormName, "[,]", ",") & "ChangeMenu">

<CFSET FunctionName2 = ReplaceList(Attributes.FormName, "[,]", ",") & "ChangeMenu2">
 
 

<!--- "MAGIC" SHORTCUTS FOR THE ONCHANGE HANDLER --->

<CFIF Attributes.OnChange is "Jump!">

  <CFSET Attributes.OnChange = "document.location = this.options[selectedIndex].value;">

<CFELSEIF Attributes.OnChange is "Submit!">

  <CFSET Attributes.OnChange = "this.form.submit();">

</CFIF>
 
 
 

<!--- USE PASSED QUERY WITHIN THIS CODE AS "MyQuery" --->

<CFSET MyQuery = Evaluate("Caller.#Attributes.Query#")>
 
 

<!--- BEGIN JAVASCRIPTING --->

<CFOUTPUT>

	<SCRIPT LANGUAGE="JavaScript1.1">

	  // javascript code generated by the CF_TwoSelectsRelated Cold Fusion tag (Nate Weiss, 4/98)

		// portions adapted from Nick Heinle's code at http://webreference.com/javascript/960902/select_boxes.html

	  var maxlength = 10;

	  OneA = new Array;
 

		var trueLength = OneA.length;  

		var lst = OneA.length;

    var Trak = 0;
 

    function require_#Attributes.Name1#() {

		  with (document.#Attributes.FormName#.#Attributes.Name1#) {

			  RetVal = true;

			  if (Trak == -1) RetVal = false; 

				  <CFIF Attributes.Type1 is "Select">

				  else RetVal = !(options[Trak].value == '');

					<CFELSEIF Attributes.Type1 is "Radio">

				  else { if (document.#Attributes.FormName#.#Attributes.Name1#[Trak].value == '') RetVal = false; else RetVal = true;}

					</CFIF>

			  if (!RetVal) alert('#Attributes.Message1#');

				return RetVal;

			}

		}
 

    function require_#Attributes.Name2#() {

		  with (document.#Attributes.FormName#.#Attributes.Name2#) {

			  RetVal = true;

			  if (selectedIndex == -1) RetVal = false;

				  else RetVal = !(options[selectedIndex].value == '');

			  if (!RetVal) alert('#Attributes.Message2#');

        return eval(RetVal);

				return RetVal;

			}

		}

		

    function require_#Attributes.Name3#() {

		  with (document.#Attributes.FormName#.#Attributes.Name3#) {

			  RetVal = true;

			  if (selectedIndex == -1) RetVal = false;

				  else RetVal = !(options[selectedIndex].value == '');

			  if (!RetVal) alert('#Attributes.Message3#');

				return RetVal

			}

		}

		

		function require_#Attributes.Name1#And#Attributes.Name2#() {

		  return ((require_#Attributes.Name1#()) && (require_#Attributes.Name2#()));

		}
 

		function require_#Attributes.Name2#And#Attributes.Name3#() {

		  return ((require_#Attributes.Name2#()) && (require_#Attributes.Name3#()));

		}

		

		function require_#Attributes.Name1#And#Attributes.Name2#And#Attributes.Name3#() {

		  return ((require_#Attributes.Name1#And#Attributes.Name2#()) && (require_#Attributes.Name3#()));

		}

				

		function #FunctionName#(menuNum) {

		   OneA.length = 0;

		   if (menuNum == null) return;  

			 Trak = menuNum;

			 <!--- ignore if a blank item gets clicked --->

			 <CFIF Attributes.Type1 is "Select">

			 if (document.#Attributes.FormName#.#Attributes.Name1#.options[menuNum].value == '') return;

			 if (document.#Attributes.FormName#.#Attributes.Name1#.options[menuNum].value == null) return;

			 </CFIF>

</CFOUTPUT>
 
 

<!--- COUNTER VARIABLE WILL HOLD NUMBER OF GROUPS (OPTIONS IN FIRST SELECT) --->

<CFSET Counter = IIF(Attributes.EmptyText1 is not "", 1, 0)>
 

<!--- CREATE AN "IF" STATEMENT THAT COVERS EACH ITEM IN THE FIRST SELECT BOX --->

<!--- WITHIN THE "IF" STATMENT, PRE-POPULATE ARRAY WITH CORRESPONDING ITEMS FOR SECOND SELECT  --->

<CFOUTPUT QUERY="MyQuery" GROUP="#Attributes.Display1#">

	if (menuNum == #Counter#) {

	  NewOpt = new Array;

		NewVal = new Array;

    <CFSET Counter2 = IIF(Attributes.EmptyText2 is not "", 1, 0)>

    <CFIF Attributes.EmptyText2 is not ""><CFOUTPUT>NewOpt[0] = new Option("#Attributes.EmptyText2#");	NewOpt[0].value = '';	</CFOUTPUT></CFIF>

		<CFOUTPUT GROUP="#Attributes.Display2#">NewOpt[#Counter2#] = new Option("#Evaluate(Attributes.Display2)#");	NewOpt[#Counter2#].value = '#Evaluate(Attributes.Value2)#'; <CFSET Counter2 = Counter2 + 1></CFOUTPUT>

	} <CFSET Counter = Counter + 1>

</CFOUTPUT>
 
 

<!--- finish up the ChangeMenu() function --->

<CFOUTPUT>

  tot = NewOpt.length;

	lst = document.#Attributes.FormName#.#Attributes.Name2#.options.length;

	for (i = lst; i > 0; i--) {

	  document.#Attributes.FormName#.#Attributes.Name2#.options[i] = null;

	}

  for (i = 0; i < tot; i++) {

	  document.#Attributes.FormName#.#Attributes.Name2#.options[i] = NewOpt[i];

	}

  <!--- <CFIF Attributes.AutoSelectFirst is "Yes"> --->

	  document.#Attributes.FormName#.#Attributes.Name2#.options[0].selected = true;

	<!--- </CFIF> --->

	#FunctionName2#(0);

}

</CFOUTPUT>
 
 
 
 

<!--- ALLOW FOR AUTO-SIZING "SHORTCUT" OF SELECT BOXES --->

<CFIF Attributes.Size1 is "Auto">

  <!--- MAKE THE FIRST SELECT BE BIG ENOUGH FOR ALL OF ITS OPTIONS --->

  <CFSET Attributes.Size1 = Counter>

</CFIF>

<CFIF Attributes.Size2 is "Auto">

  <!--- MAKE THE SECOND SELECT BE THE SAME SIZE AS THE FIRST --->

  <CFSET Attributes.Size2 = Attributes.Size1>

</CFIF>

<CFIF Attributes.Size3 is "Auto">

  <!--- MAKE THE SECOND SELECT BE THE SAME SIZE AS THE FIRST --->

  <CFSET Attributes.Size3 = Attributes.Size1>

</CFIF>
 
 
 

<CFOUTPUT>

		function #FunctionName2#() {

		   OneA.length = 0;

			 menuNum = Trak;

		   //menuNum = document.#Attributes.FormName#.#Attributes.Name1#.selectedIndex;

		   menuNum2 = document.#Attributes.FormName#.#Attributes.Name2#.selectedIndex;

		   if (menuNum == -1) return;  

		   if (menuNum2 == null) return;  

			 <!--- ignore if a the blank item gets clicked --->

			 if (document.#Attributes.FormName#.#Attributes.Name2#.options[menuNum2].value == '') return;

</CFOUTPUT>
 
 

<!--- COUNTER VARIABLE WILL HOLD NUMBER OF GROUPS (OPTIONS IN FIRST SELECT) --->

<CFSET Counter1 = 0>
 

<!--- CREATE AN "IF" STATEMENT THAT COVERS EACH ITEM IN THE FIRST SELECT BOX --->

<!--- WITHIN THE "IF" STATMENT, PRE-POPULATE ARRAY WITH CORRESPONDING ITEMS FOR SECOND SELECT  --->

<CFOUTPUT QUERY="MyQuery" GROUP="#Attributes.Display1#">

if (menuNum == #Counter1#) {

<CFSET Counter = IIF(Attributes.EmptyText2 is not "", 1, 0)>

<CFOUTPUT GROUP="#Attributes.Display2#">

	if (menuNum2 == #Counter#) {

	  NewOpt = new Array;

		NewVal = new Array;

    <CFSET Counter2 = IIF(Attributes.EmptyText2 is not "", 1, 0)>

    <CFIF Attributes.EmptyText3 is not "">NewOpt[0] = new Option("#Attributes.EmptyText3#");	NewOpt[0].value = '';	</CFIF>

		<CFOUTPUT>

		  NewOpt[#Counter2#] = new Option("#Evaluate(Attributes.Display3)#");

			NewOpt[#Counter2#].value = '#Evaluate(Attributes.Value3)#';

			<CFSET Counter2 = Counter2 + 1>

		</CFOUTPUT>

	} <CFSET Counter = Counter + 1>

</CFOUTPUT>	

}	<CFSET Counter1 = Counter1 + 1>

</CFOUTPUT>
 
 

<CFOUTPUT>

  tot = NewOpt.length;

	lst = document.#Attributes.FormName#.#Attributes.Name3#.options.length;

	

	for (i = lst; i > 0; i--) {

	  document.#Attributes.FormName#.#Attributes.Name3#.options[i] = null;

	}

  for (i = 0; i < tot; i++) {

	  document.#Attributes.FormName#.#Attributes.Name3#.options[i] = NewOpt[i];

	}

  <CFIF Attributes.AutoSelectFirst is "Yes">

	  document.#Attributes.FormName#.#Attributes.Name3#.options[0].selected = true;

	</CFIF>

}

</SCRIPT>

</CFOUTPUT>
 

<!--- DONE WITH JAVASCRIPTING.  NOW WE JUST HAVE TO DISPLAY THE FORM ELEMENTS --->
 
 
 
 
 
 
 

<!--- OUTPUT FIRST FORM ELEMENT --->

<CFIF Attributes.Type1 is "Select">

<CFOUTPUT><SELECT NAME="#Attributes.Name1#" onChange="#FunctionName#(this.selectedIndex)" SIZE="#Attributes.Size1#" <CFIF Attributes.Width1 is not "">STYLE="width:#Attributes.Width1#"</CFIF>></CFOUTPUT>

	<!--- SPECIAL FIRST ITEM, IF REQUESTED --->

	<CFIF Attributes.EmptyText1 is not ""><CFOUTPUT><OPTION VALUE="">#Attributes.EmptyText1#</CFOUTPUT></CFIF>

	<!--- GENERATE REMAINING ITEMS FROM QUERY --->

	<CFOUTPUT QUERY="MyQuery" GROUP="#Attributes.Display1#"><OPTION VALUE="#Evaluate(Attributes.Value1)#"  <CFIF Evaluate(Attributes.Value1) is Attributes.Default1>SELECTED</CFIF>>#Evaluate(Attributes.Display1)#</CFOUTPUT>

	

  <!--- "FORCE WIDTH" OPTION AT BOTTOM, IF REQUESTED --->

	<CFIF Attributes.ForceWidth1 is not ""><CFOUTPUT><OPTION VALUE="">#RepeatString(Attributes.ForceWidthChar, Attributes.ForceWidth1)#</CFOUTPUT></CFIF>

<CFOUTPUT></SELECT></CFOUTPUT>
 

<CFELSE>

  <!--- RADIO BOXES --->

  <CFSET Counter = 0>

  <CFOUTPUT QUERY="MyQuery" GROUP="#Attributes.Display1#"><INPUT TYPE="Radio" NAME="#Attributes.Name1#" VALUE="#Evaluate(Attributes.Value1)#" <CFIF Evaluate(Attributes.Value1) is Attributes.Default1>CHECKED</CFIF> onClick="#FunctionName#(#Counter#)">#Evaluate(Attributes.Display1)##Attributes.HTMLAfterEachRadio1#<CFSET Counter = Counter + 1></CFOUTPUT>
 

</CFIF>
 
 
 

<!--- INSERT ANY REQUESTED HTML BETWEEN 1ST AND SECOND ITEMS --->

<CFOUTPUT>#Attributes.HTMLAfter1#</CFOUTPUT>
 
 
 

<!--- OUTPUT SECOND SELECT BOX --->

<CFOUTPUT><SELECT NAME="#Attributes.Name2#" SIZE="#Attributes.Size2#" onChange="#FunctionName2#(this.selectedIndex)" <CFIF Attributes.Width2 is not "">STYLE="width:#Attributes.Width2#"</CFIF>></CFOUTPUT>

	<!--- SPECIAL FIRST ITEM, IF REQUESTED --->

	<CFIF Attributes.EmptyText2 is not ""><CFOUTPUT><OPTION VALUE="">#Attributes.EmptyText2#</CFOUTPUT></CFIF>

	

	<!--- GENERATE REMAINING ITEMS FROM QUERY --->

	<!--- WE ONLY NEED TO OUTPUT THE CHOICES FOR THE FIRST GROUP --->

	<!--- <CFSET FirstGroup = Evaluate("MyQuery.#Attributes.Value1#[1]")> --->

	<CFSET FirstGroup = Attributes.Default1>

	<CFSET CurrentGroup2 = "">

	<CFIF Attributes.EmptyText1 is "">

		<CFLOOP QUERY="MyQuery">

		  <CFIF Evaluate("MyQuery.#Attributes.Value1#") is Variables.FirstGroup>

			  <CFSET ThisValue = Evaluate("MyQuery.#Attributes.Value2#")>

			  <CFIF Variables.ThisValue is not Variables.CurrentGroup2>

			    <CFOUTPUT><OPTION VALUE="#Variables.ThisValue#" <CFIF Variables.ThisValue is Attributes.Default2>SELECTED</CFIF>>#Evaluate("MyQuery.#Attributes.Display2#")#</CFOUTPUT>

				<CFSET CurrentGroup2 = Evaluate("MyQuery.#Attributes.Value2#")>

				</CFIF>

			<!--- <CFELSE>

			  <CFBREAK> --->

			</CFIF>

		</CFLOOP>

	</CFIF>	
 

  <!--- "FORCE WIDTH" OPTION AT BOTTOM, IF REQUESTED --->

	<CFIF Attributes.ForceWidth2 is not ""><CFOUTPUT><OPTION VALUE="">#RepeatString(Attributes.ForceWidthChar, Attributes.ForceWidth2)#</CFOUTPUT></CFIF>

	<CFIF Attributes.ExtraOptions2 is not ""><CFLOOP INDEX="This" FROM="1" TO="#Attributes.ExtraOptions2#"><CFOUTPUT><OPTION VALUE=""></CFOUTPUT></CFLOOP></CFIF>

<CFOUTPUT></SELECT></CFOUTPUT>
 
 
 

<!--- INSERT ANY REQUESTED HTML BETWEEN 2ND AND 3RD ITEMS --->

<CFOUTPUT>#Attributes.HTMLAfter2#</CFOUTPUT>
 
 
 

<!--- OUTPUT THIRD SELECT BOX --->

<CFOUTPUT><SELECT NAME="#Attributes.Name3#" SIZE="#Attributes.Size3#" <CFIF Attributes.Multiple3 is "Yes">MULTIPLE </CFIF><CFIF Attributes.Width3 is not "">STYLE="width:#Attributes.Width3#"</CFIF><CFIF Attributes.OnChange is not ""> OnChange="#Attributes.OnChange#"</CFIF>></CFOUTPUT>

	<CFSET FirstGroup = Attributes.Default1>

	<CFIF Attributes.EmptyText3 is "">

		<CFLOOP QUERY="MyQuery">

		  <CFIF Evaluate("MyQuery.#Attributes.Value1#") is Variables.FirstGroup>

			  <CFSET Hack = Evaluate("MyQuery.#Attributes.Value2#")>

			  <CFSET ThisValue = Evaluate("MyQuery.#Attributes.Value3#")>

			  <CFPARAM NAME="Variables.FirstGroup2" DEFAULT="#Variables.Hack#">

			  <CFIF Evaluate("MyQuery.#Attributes.Value2#") is Variables.FirstGroup2>

				  <CFOUTPUT><OPTION VALUE="#Variables.ThisValue#" <CFIF Variables.ThisValue is Attributes.Default3>SELECTED</CFIF>>#Evaluate("MyQuery.#Attributes.Display3#")#</CFOUTPUT>

				</CFIF>	

			</CFIF>

		</CFLOOP>

	</CFIF>	
 

	<CFIF Attributes.ForceWidth3 is not ""><CFOUTPUT><OPTION VALUE="">#RepeatString(Attributes.ForceWidthChar, Attributes.ForceWidth3)#</CFOUTPUT></CFIF>

	<CFIF Attributes.ExtraOptions3 is not ""><CFLOOP INDEX="This" FROM="1" TO="#Attributes.ExtraOptions3#"><CFOUTPUT><OPTION VALUE=""></CFOUTPUT></CFLOOP></CFIF>

<CFOUTPUT></SELECT></CFOUTPUT>
 

<!--- REMOVE THIS AND FIRST LINE IF NOT USING CF3.1 OR LATER --->

<CFSETTING ENABLECFOUTPUTONLY="NO">

Open in new window

0
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 24344960
Thanks but can u guide me with the database what tables and fields i should do.

i shall be very thankful to you
0
 
LVL 4

Expert Comment

by:galadore
ID: 24345053
Only need one table that has the city and states all listed.  I've attached an Access DB called freezip that has a complete US city/state/zip/lat/lon list that anyone can use.  It's old, but it's not like new cities pop up all the time...

Now, follow the directions that are in the HTML file I attached earlier.
FreeZip.mdb
0
 
LVL 4

Expert Comment

by:galadore
ID: 24345070
I found the TwoSelectsRelated custom tag on my machine.  Attached below...
<!--- REMOVE THIS AND FIRST LINE IF NOT USING CF3.1 OR LATER --->

<CFSETTING ENABLECFOUTPUTONLY="YES">
 

<!--- TAG PARAMETERS --->

<CFPARAM NAME="Attributes.Query">  

<CFPARAM NAME="Attributes.Display1">

<CFPARAM NAME="Attributes.Display2">

<CFPARAM NAME="Attributes.Value1" DEFAULT="#Attributes.Display1#">

<CFPARAM NAME="Attributes.Value2" DEFAULT="#Attributes.Display2#">

<CFPARAM NAME="Attributes.Name1" DEFAULT="TwoSelectsRelated1">

<CFPARAM NAME="Attributes.Name2" DEFAULT="TwoSelectsRelated2">

<CFPARAM NAME="Attributes.Size1" DEFAULT="1">

<CFPARAM NAME="Attributes.Size2" DEFAULT="1">

<CFPARAM NAME="Attributes.Width1" DEFAULT="">

<CFPARAM NAME="Attributes.Width2" DEFAULT="">

<CFPARAM NAME="Attributes.selected1" DEFAULT="">

<CFPARAM NAME="Attributes.selected2" DEFAULT="">

<CFPARAM NAME="Attributes.ForceWidth1" DEFAULT="">

<CFPARAM NAME="Attributes.ForceWidth2" DEFAULT="">

<CFPARAM NAME="Attributes.ForceWidthChar" DEFAULT="&nbsp;">

<CFPARAM NAME="Attributes.EmptyText1" DEFAULT="">

<CFPARAM NAME="Attributes.EmptyText2" DEFAULT="">

<CFPARAM NAME="Attributes.Message1" DEFAULT="You must choose an option for #Attributes.Name1#.">

<CFPARAM NAME="Attributes.Message2" DEFAULT="You must choose an option for #Attributes.Name2#.">

<CFPARAM NAME="Attributes.FormName" DEFAULT="forms[0]">

<CFPARAM NAME="Attributes.HTMLBetween" DEFAULT="">

<CFPARAM NAME="Attributes.OnChange" DEFAULT="">

<CFPARAM NAME="Attributes.AutoSelectFirst" DEFAULT="Yes">
 
 

<CFSET FunctionName = ReplaceList(Attributes.FormName, "[,]", ",") & "ChangeMenu()">
 
 

<!--- "MAGIC" SHORTCUTS FOR THE ONCHANGE HANDLER --->

<CFIF Attributes.OnChange is "Jump!">

  <CFSET Attributes.OnChange = "document.location = this.options[selectedIndex].value;">

<CFELSEIF Attributes.OnChange is "Submit!">

  <CFSET Attributes.OnChange = "this.form.submit();">

</CFIF>
 
 
 

<!--- USE PASSED QUERY WITHIN THIS CODE AS "MyQuery" --->

<CFSET MyQuery = Evaluate("Caller.#Attributes.Query#")>
 
 

<!--- BEGIN JAVASCRIPTING --->

<CFOUTPUT>

	<SCRIPT LANGUAGE="JavaScript1.1">

	  // javascript code generated by the CF_TwoSelectsRelated Cold Fusion tag (Nate Weiss, 4/98)

		// portions adapted from Nick Heinle's code at http://webreference.com/javascript/960902/select_boxes.html

	  var maxlength = 10;

	  OneA = new Array;
 

		var trueLength = OneA.length;  

		var lst = OneA.length;              
 

    function require_#Attributes.Name1#() {

		  with (document.#Attributes.FormName#.#Attributes.Name1#) {

			  RetVal = true;

			  if (options[selectedIndex] == null) RetVal = false;

				  else RetVal = !(options[selectedIndex].value == '');

			  if (!RetVal) alert('#Attributes.Message1#');

				return RetVal

			}

		}
 

    function require_#Attributes.Name2#() {

		  with (document.#Attributes.FormName#.#Attributes.Name2#) {

			  RetVal = true;

			  if (options[selectedIndex] == null) RetVal = false;

				  else RetVal = !(options[selectedIndex].value == '');

			  if (!RetVal) alert('#Attributes.Message2#');

				return RetVal

			}

		}

		

		function require_#Attributes.Name1#And#Attributes.Name2#() {

		  return ((require_#Attributes.Name1#()) && (require_#Attributes.Name2#()));

		}

		

				

		function #FunctionName# {

		   OneA.length = 0;

		   menuNum = document.#Attributes.FormName#.#Attributes.Name1#.selectedIndex;

		   if (menuNum == null) return;  

       <!--- this function gets continued in the next CFOUTPUT section --->

</CFOUTPUT>
 
 

<!--- COUNTER VARIABLE WILL HOLD NUMBER OF GROUPS (OPTIONS IN FIRST SELECT) --->

<CFSET Counter = IIF(Attributes.EmptyText1 is not "", 1, 0)>
 

<!--- CREATE AN "IF" STATEMENT THAT COVERS EACH ITEM IN THE FIRST SELECT BOX --->

<!--- WITHIN THE "IF" STATMENT, PRE-POPULATE ARRAY WITH CORRESPONDING ITEMS FOR SECOND SELECT  --->

<CFOUTPUT QUERY="MyQuery" GROUP="#Attributes.Display1#">

	if (menuNum == #Counter#) {

	  NewOpt = new Array;

		NewVal = new Array;

    <CFSET Counter2 = IIF(Attributes.EmptyText2 is not "", 1, 0)>

    <CFIF Attributes.EmptyText2 is not ""><CFOUTPUT>NewOpt[0] = new Option("#Attributes.EmptyText2#");	NewOpt[0].value = '';	</CFOUTPUT></CFIF>

		<CFOUTPUT>NewOpt[#Counter2#] = new Option("#Evaluate(Attributes.Display2)#");	NewOpt[#Counter2#].value = '#Evaluate(Attributes.Value2)#'; <CFSET Counter2 = Counter2 + 1></CFOUTPUT>

	} <CFSET Counter = Counter + 1>

</CFOUTPUT>
 
 

<!--- finish up the ChangeMenu() function --->

<CFOUTPUT>

  tot = NewOpt.length;

	lst = document.#Attributes.FormName#.#Attributes.Name2#.options.length;

	

	for (i = lst; i > 0; i--) {

	  document.#Attributes.FormName#.#Attributes.Name2#.options[i] = null;

	}

  for (i = 0; i < tot; i++) {

	  document.#Attributes.FormName#.#Attributes.Name2#.options[i] = NewOpt[i];

	}

  <CFIF Attributes.AutoSelectFirst is "Yes">

	  document.#Attributes.FormName#.#Attributes.Name2#.options[0].selected = true;

	</CFIF>

}
 
 
 
 

</SCRIPT>

</CFOUTPUT>

<!--- DONE WITH JAVASCRIPTING.  NOW WE JUST HAVE TO DISPLAY THE FORM ELEMENTS --->
 
 

<!--- ALLOW FOR AUTO-SIZING "SHORTCUT" OF SELECT BOXES --->

<CFIF Attributes.Size1 is "Auto">

  <!--- MAKE THE FIRST SELECT BE BIG ENOUGH FOR ALL OF ITS OPTIONS --->

  <CFSET Attributes.Size1 = Counter>

</CFIF>

<CFIF Attributes.Size2 is "Auto">

  <!--- MAKE THE SECOND SELECT BE THE SAME SIZE AS THE FIRST --->

  <CFSET Attributes.Size2 = Attributes.Size1>

</CFIF>
 
 
 

<!--- OUTPUT FIRST SELECT BOX --->

<CFOUTPUT><SELECT NAME="#Attributes.Name1#" onChange="#FunctionName#" SIZE="#Attributes.Size1#" <CFIF Attributes.Width1 is not "">STYLE="width:#Attributes.Width1#"</CFIF> class="dropdown"></CFOUTPUT>

	<!--- SPECIAL FIRST ITEM, IF REQUESTED --->

	<CFIF Attributes.EmptyText1 is not ""><CFOUTPUT><OPTION VALUE="">#Attributes.EmptyText1#</CFOUTPUT></CFIF>

	<!--- GENERATE REMAINING ITEMS FROM QUERY --->

	<CFOUTPUT QUERY="MyQuery" GROUP="#Attributes.Display1#"><OPTION VALUE="#Evaluate(Attributes.Value1)#"<cfif Attributes.selected1 is not ""><cfif Attributes.selected1 is Evaluate(Attributes.Value1)>Selected</cfif></cfif>>#Evaluate(Attributes.Display1)#</CFOUTPUT>

	

  <!--- "FORCE WIDTH" OPTION AT BOTTOM, IF REQUESTED --->

	<CFIF Attributes.ForceWidth1 is not ""><CFOUTPUT><OPTION VALUE="">#RepeatString(Attributes.ForceWidthChar, Attributes.ForceWidth1)#</CFOUTPUT></CFIF>

<CFOUTPUT></SELECT></CFOUTPUT>
 
 

<!--- INSERT ANY REQUESTED HTML BETWEEN THE TWO SELECT BOXES --->

<CFOUTPUT>#Attributes.HTMLBetween#</CFOUTPUT>
 
 
 

<!--- OUTPUT SECOND SELECT BOX --->

<CFOUTPUT><SELECT NAME="#Attributes.Name2#" SIZE="#Attributes.Size2#" <CFIF Attributes.onChange is not "">onChange="#Attributes.OnChange#"</CFIF> <CFIF Attributes.Width2 is not "">STYLE="width:#Attributes.Width2#"</CFIF> class="dropdown"></CFOUTPUT>

	<!--- SPECIAL FIRST ITEM, IF REQUESTED --->

	<CFIF Attributes.EmptyText2 is not ""><CFOUTPUT><OPTION VALUE="">#Attributes.EmptyText2#</CFOUTPUT></CFIF>

	

	<!--- GENERATE REMAINING ITEMS FROM QUERY --->

	<!--- WE ONLY NEED TO OUTPUT THE CHOICES FOR THE FIRST GROUP --->

	<CFSET FirstGroup = Evaluate("MyQuery.#Attributes.Display1#")>

	<CFIF Attributes.EmptyText1 is "">

		<CFLOOP QUERY="MyQuery">

		  <CFIF Evaluate(Attributes.Display1) is FirstGroup>

			  <CFOUTPUT><OPTION VALUE="#Evaluate(Attributes.Value2)#" <cfif Attributes.selected2 is not ""><cfif Attributes.selected2 is Evaluate(Attributes.Value2)>Selected</cfif></cfif>>#Evaluate(Attributes.Display2)#</CFOUTPUT>

			<CFELSE>

			  <CFBREAK>

			</CFIF>

		</CFLOOP>

	</CFIF>	
 

  <!--- "FORCE WIDTH" OPTION AT BOTTOM, IF REQUESTED --->

	<CFIF Attributes.ForceWidth2 is not ""><CFOUTPUT><OPTION VALUE="">#RepeatString(Attributes.ForceWidthChar, Attributes.ForceWidth2)#</CFOUTPUT></CFIF>

<CFOUTPUT></SELECT></CFOUTPUT>
 

<cfif Attributes.selected2 is not "">

<CFOUTPUT>

<script>

#FunctionName#

document.f.#Attributes.Name2#.value='#Attributes.selected2#'

</script>

</cfoutput>

</cfif>
 
 

<!--- REMOVE THIS AND FIRST LINE IF NOT USING CF3.1 OR LATER --->

<CFSETTING ENABLECFOUTPUTONLY="NO">

Open in new window

0
 

Expert Comment

by:hanno62
ID: 24348684
But two-selectrelated tag is not Ajax, as you will load all in advance from what I see.

Have you check the CF documentation on this same topic for ajax
0
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 24348740
not yet!, i am looking for something in ajax, but could not find the one, i hope tere is some bind stuff with two cfselect statement but i am really overdue what to do<input id="gwProxy" type="hidden"><!--Session data--><input onclick="jsCall();" id="jsProxy" type="hidden">
0
 

Expert Comment

by:hanno62
ID: 24348828
It is not that diffcult once

Put two <cfselect> on your form

The first one

<cfselect name="state">
  <loop on your query for distinct State>, just like you always have done as you need the initial select  for your state (no need for ajax here)
</cfselect>

<cfselect name="city"
   bindOnLoad="yes"      
   bind="cfc:city({state})"/>                        
                        
Now make a cfc called city.cfc
city.cfc

<cfcomponent>

    <cfproperty name="name" type="string">
    <cfset this.name = "mytest">
            
      <cffunction name="CitySelect"
             access="remote"
             returntype="array">

 <cfargument name="State"    type="string" required="true">
.
<cfquery name="myquery">
SELECT CityCode, CityName FROM Table WHERE State = '#state#'
</cfquery>
                    
 <cfset list = arraynew(2)>
                                         
<!--- Convert results to array --->
<cfloop index="i" from="1" to="#myquery.RecordCount#">
          <cfset list[i][1]= myquery.CityCode[i]>
               <cfset list[i][2]= myquery.CityName[i]>
</cfloop>
            
<cfreturn list>
            
</cffunction>
            
</cfcomponent>      

Hanno, Guatemala

I am sure there are plenty of example on the internet.


0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 24349252
Your approach quite good but if you can guide me with some things, i shall be able to set up this soon.

i have database table zips which have

zipcode
state
place

but i want to use only state and place.

in my users database i have

state
city as two fields datafield being varchar.

can u please guide me step procedure how i set this up. i am really lost here
<input id="gwProxy" type="hidden"><!--Session data--><input onclick="jsCall();" id="jsProxy" type="hidden">
0
 

Expert Comment

by:hanno62
ID: 24349321
My code is for selecting a state and then a city.

That you later save the fields into a user database, you can do with a regular submit in which you insert or update a users database. I assume this is not your problem.

Can you confirm that at least you go the input fields working as i outline above ? Then we get it to the next stage.




0
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 24349437
ok i did something like this. all code will be in attach window
<input id="gwProxy" type="hidden"><!--Session data--><input onclick="jsCall();" id="jsProxy" type="hidden">
query i used to fetch states as i have 29,000 records:
 

SELECT DISTINCT(state) as sstate 

        from zips 

        GROUP by state
 

<tr><td><strong>State</strong></td>

      <td><select name="state" class="textfield_effect">

      	<cfoutput query="getData">

        	<option value="#sstate#" <cfif sstate eq #state#>selected</cfif>>#sstate#</option>

        </cfoutput>

      </select>&nbsp;

      <cfselect name="city" bindOnLoad="yes" bind="cfc:statecity({CitySelect})"/>   

      </td>

      </tr>
 

CFC name is:STATECITY.CFC 
 

<cfcomponent>

<cfproperty name="name" type="string">

<cffunction name="CitySelect" access="remote" returntype="array">

  <cfargument name="State" type="string" required="true">

  <cfquery name="myset" datasource="#request.dsn#" username="#request.user#" password="#request.pass#">

	SELECT city,state 

    FROM zips 

    WHERE State = <cfqueryparam cfsqltype="cf_sql_varchar" value="#state#">

  </cfquery>

  <cfset list = arraynew(2)>

  <!--- Convert results to array --->

  <cfloop index="i" from="1" to="#myset.RecordCount#">

    <cfset list[i][1]= myquery.city[i]>

    <cfset list[i][2]= myquery.state[i]>

  </cfloop>

  <cfreturn list>

</cffunction>

</cfcomponent>
 

Error is reieve:
 

The web site you are accessing has experienced an unexpected error.

Please contact the website administrator. 
 

The following information is meant for the website developer for debugging purposes.

Error Occurred While Processing Request

CFC function not found in the bind expression cfc:statecity({CitySelect})
 

 

The error occurred in C:\Inetpub\wwwroot\ibestcity\account.cfm: line 116

Called from C:\Inetpub\wwwroot\ibestcity\allpages.cfm: line 22

Called from C:\Inetpub\wwwroot\ibestcity\index.cfm: line 93

114 :         </cfoutput>

115 :       </select>&nbsp;

116 :       <cfselect name="city" bindOnLoad="yes" bind="cfc:statecity({CitySelect})"/>   

117 :       </td>

118 :       </tr>

Open in new window

0
 

Expert Comment

by:hanno62
ID: 24349806
The bind should link to the function

so
STATECITY.CitySelect

(I usually use just lower annotation case although CF allows for mixed). Consider this for future development.

0
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 24351282
Thanks i bind it but it does load the contents. i used the following cfc:


<input id="gwProxy" type="hidden"><!--Session data--><input onclick="jsCall();" id="jsProxy" type="hidden">
<cfcomponent>

<cfproperty name="name" type="string">

<cffunction name="CitySelect" access="remote" returntype="array">

  <cfargument name="State" type="string" required="true">

  <cfquery name="myset" datasource="#request.dsn#" username="#request.user#" password="#request.pass#">

	SELECT place,state 

    FROM zips 

    WHERE State = <cfqueryparam cfsqltype="cf_sql_varchar" value="#state#">

  </cfquery>

  <cfset list = arraynew(2)>

  <!--- Convert results to array --->

  <cfloop index="i" from="1" to="#myset.RecordCount#">

    <cfset list[i][1]= myquery.place[i]>

    <cfset list[i][2]= myquery.state[i]>

  </cfloop>

  <cfreturn list>

</cffunction>

</cfcomponent>
 

<cfselect name="city" bindOnLoad="yes" bind="cfc:statecity.CitySelect({State})"/>   
 

i checked firebug and got this response:
 

it just return this :
 

 []
 

without any value in it.

Open in new window

0
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 24373660
hi experts, any update provide me please how i do this <input id="gwProxy" type="hidden"><!--Session data--><input onclick="jsCall();" id="jsProxy" type="hidden">
0
 
LVL 15

Author Closing Comment

by:Gurpreet Singh Randhawa
ID: 31579786
Although i did not implemented This Way but you provided me a valuable information like table and custom tag So many thanks For this
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

If you don't have the right permissions set for your WordPress location in IIS, you won't be able to perform automatic updates. Here's how to fix the problem.
Meet the world's only “Transparent Cloud™” from Superb Internet Corporation. Now, you can experience firsthand a cloud platform that consistently outperforms Amazon Web Services (AWS), IBM’s Softlayer, and Microsoft’s Azure when it comes to CPU and …
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now