Drop down box and key-value structure

[rlatham]

Hello, please help.

I am using Coldfusion to create a form. The user is ordering T-shirts for the team.

What I wish to accomplish in part of this form is the following:

The user will select an activity (examples: chess club, soccer, golf). The change in the drop down box should trigger something that will create/populate a key-value structure that I wish to call "Items" which contains a list of items, these items have the keys: Ts-YM, Ts-YL (these keys come from the table Products) and the values are the quantity that the user will enter. The default number will be 0. The values should be represented in a text box.

The key-value structure will allow me to use the keys as another piece of data, that I can manipulate later.

The activity tells me which items I should display.The Products table has several items that are sold just for that activity, let's say just t-shirts are sold for soccer, and just hats are sold for golf and just Sweat shirt are sold for the chess club. Hence, according to the activity selected the structure should display the items that belong to that particular activity.

If this is too complicated and you know an easier way to do this, please let me know.

Mainly, I wish to know how to capture the value of the activity selected in the drop down box and be able to assign that value to a ColdFusion variable to use it in the same page without having to reload it.

Thanks in advance for your precious help!

R.Latham

 

[csteinhilber]

You wouldn't be able to assign a value to a ColdFusion variable without making another trip to the server.

Remember, ColdFusion processes server-side... this means that it's finished all it's processing and washed it's hands of the page before the browser ever sees it. By the time you see the page display, ColdFusion variables, in essence, no longer exist.

If you really want to do what you describe, you'll need to do it using a client-side language, such as javascript.

Luckily, having javascript use ColdFusion variables is as easy as writing them out within a CFOUTPUT. So, one solution would be to run your query that returns all your "items", ordered by activity, then use that resultset to build DHTML layers, each layer containing the items associated with a particular activity. Then, in the onChange event for the drop down, you'd call a javascript function that would hide/show the appropriate layers.

WARNING: pseudo-code! Not code accurate!

<select name=&quot;activity&quot; ... onChange=&quot;javascript:switchLayers();&quot;>
<CFOUTPUT query=&quot;qryProducts&quot; group=&quot;activity&quot;>
   <option value&quot;#qryProducts.activity_id#&quot;>#qryProducts.activityname#</option>
</CFOUTPUT>
</select>

<CFOUTPUT query=&quot;qryProducts&quot; group=&quot;activity&quot;>
<DIV id=&quot;layer_#qryProducts.activity_id#&quot; ...>
<CFOUTPUT group=&quot;itemname&quot;>
   #qryProducts.itemname#: <input type=&quot;text&quot; name=&quot;qty_#qryProducts.itemnumber#&quot; ...>
</CFOUTPUT>
</DIV>
</CFOUTPUT>

Then your switchLayers() javascript function would look at the value selected in the activities dropdown, and switch to the appropriate layer:

  <script>
     function switchLayers(){
        var activitydropdown = document.forms[formname].elements[&quot;activity&quot;];
        var selectedActivityID = activitydropdown.options[activitydropdown.selectedIndex].value;

        // hide the currently visible layer, and show layer &quot;layer_&quot; + selectedActivityID
     }
  </script>

The compexity of the javascript to hide and show layers is dependent on how cross-browser-compatible you need it to be. The more browsers you need to support, the more hairy that javascript becomes. Just google for "dhtml hide show layers" or something to find more information.


-Carl

 

[rlatham]

Carl,
Thanks a lot for your reply.
It was enlightning !

 

[doyle9732]

I am looking to do something similiar.....but am not at all comfortable with javascript. is there any way to call a cfm file in the onChange function? ie. the person selects their name in the drop down box, the onChange calls a query that takes the user's name and collects all their information and then the page can reload with their info.

Stephanie

 

[TruthInSatire]

yeah doing it that way is easy.

<select name = "employeeName" onChange = "document.location = 'editEmployee.cfm?employeeID='&this.value">
<option value = ""></option>
<cfoutput query = "qListemployees">
<option value = "#qListemployees.employeeID#">#qListEmployees.lastName#, #qListEmployees.firstName#</option>
</cfoutput>
</select>

then in your editEmployee.cfm you look at the url for the employee's id.

that syntax may be a bit off it's from memory and i haven't done it in a while. if the JS doesn't work let me know, i'll try to fix the syntax.

If you don't ask the right questions, you don't get the right answers. A question asked in the right way often points to its own answer. Asking questions is the ABC of diagnosis. Only the inquiring mind solves problems.

-Quote by Edward Hodnett