Question with Dynamically Filling Form Elements

[powahusr]

I would like to learn how to build a form that dynamically populates other form elements within the form when a specific value is chosen in that control. For instance, say I wanted to build a Form that provided information on a particular Make and Model of a vehicle.

Say I have 2 “Select “ Form Controls. The first Select Control called “Make” and the Second called “Model”.

What I would like to do is, whenever the first Select Control “Make” is selected and a value chosen, I would like for the 2nd Select Control to be dynamically populated with relevant information to the “Make” of that vehicle from a table called “Make” which holds this data.

So if someone was to click on the “Make” Select Control and chose Chrysler, the 2nd Select Control “Model” would be Dynamically populated with models such as, PT Cruiser, Concorde, Voyager, etc…

I know how to “Pre-fill” Form Controls, but this feat seems to be a step or two beyond my current understanding of how to dynamically populate form controls or (Pre-fill) a form control.

I prefer a non-JavaScript and Non-Frame way of doing this, due to the fact that many people disable JavaScript in their browser, which will ultimately render this feature useless. If you only know of a JavaScript method, please show anyway; I suppose if this cant be done Server-Side, something is better than nothing. I guess I could always create a conditional statement to circumvent problems with browsers that have JavaScript disabled.

I hope I made this all clear.

Thanks in Advance!!!

 

[twcman]

OK. Here is the non-frames version. You would use some javascript.

You use the onchange event of the make select box to reload the page (onchange='window.location.href=thispagename.cfm?make='formname.make.value

When the page is reloaded you test for a value in make. If present, use it in the WHERE statement a query to find the model

That is kind of the watered down version. let me know if more detail is needed.
The only dumb questions are the ones that are never asked

 

[philhege]

Use the CF_TwoSelectsRelated tag. It's in the Dev Exchange at Allaire, er, Macromedia.

<OPINION>
If your site requires functionality provided by JS, make the user use it. JS is nice in that it doesn't require round-trips to the server to get done what you need to have done. I have JS functions all over the place, for context sensitive actions (like what you want to do with the select dropdowns), data validation, navigation, etc. If my user has disabled JS in their browser, a page appears that asks them kindly to turn it back on, or else they can't use the site. It's the folks who use JS to create those annoying pop-up ad windows that are ruining it for the rest of us.
</OPINION>

 

[felixtkatt]

I did something that is almost identical to what you are trying to do. In my case, I had the first select tag choose a group of contacts and the second select had the individual emails of each member of the group. All of my select tags were (however) populated from a database. Here is the final code I ended up using:

<cfquery datasource=&quot;sgweb&quot; name=&quot;grpSel&quot;>
SELECT * FROM emailGrps ORDER BY Group
</cfquery>
<cfloop index=&quot;x&quot; From = &quot;1&quot; to = &quot;#grpSel.recordcount#&quot;>
	<cfquery datasource=&quot;sgweb&quot; name=&quot;popAr#x#&quot;>
	SELECT * FROM emails WHERE emails.Group = '#grpSel.Group[x]#' ORDER BY Name
	</cfquery>
</cfloop>
<SCRIPT Language=&quot;JavaScript&quot;>
  <!-- Script Start
function updateSel(form)
{
      form.adrs.length = 1;
      form.adrs.selectedIndex = 0;
      choice = form.group.options[form.group.selectedIndex].value;
<CFLOOP Index=&quot;count&quot; from=&quot;1&quot; to=&quot;#grpSel.recordcount#&quot;>
<CFOUTPUT>
   if (choice == &quot;#grpSel.ID[count]#&quot;)
   {
   <CFLOOP index=&quot;x&quot; From=&quot;1&quot; to=&quot;#Evaluate('popAr#count#.recordcount')#&quot;>
     (form.adrs.length)++;
     form.adrs.options[form.adrs.length - 1].text   = &quot;#Evaluate('popAr#count#.Name[x]')#&quot; + &quot; - <&quot; + &quot;#Evaluate('popAr#count#.Email[x]')#&quot; + &quot;@sg.usf.edu>&quot;;
     form.adrs.options[form.adrs.length - 1].value = &quot;#Evaluate('popAr#count#.Email[x]')#&quot;;
   </CFLOOP>
   }
</CFOUTPUT>
</CFLOOP>
}
//-->
</script>

Later in the page:

<form action=&quot;mail.cfm&quot; method=&quot;POST&quot;>
Select a group from the list<br>
<select name=&quot;group&quot; onChange=&quot;updateSel(this.form)&quot;>
	<option value=&quot; &quot;>Please Select a Group</option>
	<cfoutput query=&quot;grpSel&quot;>
	<option value=&quot;#ID#&quot;>#Group#</option>
	</cfoutput>
</select> 
<br>
<br>
Select an address:<br>
<select name=&quot;adrs&quot;>
<option value=&quot;Null&quot;>Select an individual</option>
</select>

As far as I am aware, there is no completely server-side way to perform this. Even the custom CF tags implement this by using JS.

Let me know if this was of use to you. FTK

 

[powahusr]

twcman,

I tried your method first, not that the others aren’t worthy but it appeared to be the simplest. Anyway, I have a couple questions in regards to your solution.

Is there an associated function with your “onChange” event? I noticed that there was an open parenthesis but no closing one, perhaps there was some additional information enclosed within the missing closed parenthesis? I did the best I could with what you showed, but I couldn’t get it to work. Any Suggestions?

Perhaps the code bellow may help clear up the problem, as it’s basically what I’m working with in my test form utilizing the JavaScript you suggested. Thanks


##########################################################
<!--- Start Code --->


<!--- (1) Make Query --->
<CFQUERY NAME=&quot;GetMakeNames&quot; DATASOURCE=&quot;#Variables.DSN#&quot;>
SELECT Make
FROM Make
</CFQUERY>


<!--- (2) Model Query --->
<cfoutput>
<CFQUERY NAME=&quot;GetModelNames&quot; DATASOURCE=&quot;#Variables.DSN#&quot;>
SELECT Model, ModelID
FROM Model

<cfif IsDefined(&quot;URL.Make&quot>
WHERE Make = '#URL.Make#'
</cfif>
</CFQUERY>
</cfoutput>


<!--- (3) My Form --->

<form Name=&quot;List&quot;>

<strong><font face=&quot;Arial&quot; size=&quot;2&quot;>Make</font></strong><br>

<select name=&quot;Make&quot; onChange='window.location.href=test.cfm?Make='List.Make.value'>
<option></option>
<cfoutput query=&quot;GetMakeNames&quot;>
<option value='#GetMakeNames.Make#'>
#GetMakeNames.Make#</option>
</cfoutput>
</select>

<br><br>

<strong><font face=&quot;Arial&quot; size=&quot;2&quot;>Model</font></strong><br>

<select name=&quot;Model&quot;>
<option></option>
<cfoutput query=&quot;GetModelNames&quot;>
<option value=&quot;#GetModelNames.ModelID#&quot;>
#GetModelNames.Model#</option>
</cfoutput>
</select>

</form>

<!--- End Code --->
##########################################################