#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    19
    Rep Power
    0

    Chained select boxes in CF8


    I have an ever-growing list of companies in a database, each with a specific form for our employees to fill out and have been tasked with updating a demographic info collection page such that when the company is selected from the drop-down menu (i.e. select-box), the form is dynamically displayed. Here is my existing code, however the main hurdle to get over is allowing the VALUE on the company field to remain the CLIENTNAME instead of changing it to an index, which won't work anyway because JS needs a numeric index. What I have here is based off another piece of code that dynamically updates a text field for pricing based on a type of test selected, but w/ my limited knowledge of JS and how to make it work w/ CF this is the best I could come up with:

    Code:
    <script type="text/javascript">
      var CO = new Array();
    
    <cfloop query="getcos">
    <cfoutput>
    CO[#trim(getcos.clientname)#] = #getcos.form#;
    </cfoutput>
    </cfloop>
    
      function choice(){
        y = document.getElementById("comp");
          document.getElementById("CO").value = CO[y.selectedIndex];}
    
    </script>
    
    COMPANY<select name="company" id="comp" onChange="choice();">
    		<option value="NEW" selected>NEW COMPANY</option>
    		<cfloop query="getcos">
    		<option value="#trim(UCase(clientname))#">#trim(UCase(clientname))#</option>
    		</cfloop>
    	</select>
    
    FORM DESIGNATION NO.<input type="text" id="CO" name="formdes">
    Not sure if you actually CAN loop through a query within a JS block but it did not throw any errors. Naturally it did not work either. Thanks in advance for your help and insight, looking forward to your responses!

    Quick Edit: I have tried using cfbind (with the pricing issue) and followed numerous examples all to no avail. If there is a solution that doesn't involve using that (nor application.cfc/cfm) then that is preferred but at this point anything that will actually work, I'm open to.
  2. #2
  3. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,277
    Rep Power
    968
    I'd look at the built-in AJAX support (http://www.forta.com/blog/index.cfm/...elated-Selects), or something like jQuery. It's far easier to dynamically load the values for the second select box after the first is chosen than it is to try and pre-generate everything up front with JS arrays.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    19
    Rep Power
    0
    Ok, thanks for the pointer...I'm actually having trouble with this code, though. To be honest, I'm not used to using CFCs and have been coding all my CF in-line (not sure if that is the right term). I DID get the code to work using the "cfartgallery" code and retyping the code word for word, however it is a slightly different thing I'm trying to do for my purposes. Each record in the "CLIENTS" table (SQL Server 2005) has a "clientid" (PK) "clientname", and "form" field. What I want is for when a "clientname" is chosen (from a select box) I want the "form" field to be displayed dynamically for THAT record...here is the code I have so far, I assume I have one too many cffunctions but don't know what the fix is. Help please!

    form.cfc

    Code:
    <cfcomponent output="false">
      
      <cfset THIS.dsn="test">
      
      <cffunction name="getCo" access="remote" returnType="array">
        <cfset var data="">
        <cfset var result=ArrayNew(2)>
        <cfset var i=0>
        
        <cfquery name="data" datasource="#THIS.dsn#">
          SELECT clientname,form FROM clients ORDER BY clientname
        </cfquery>
        
        <cfloop index="i" from="1" to="#data.RecordCount#">
          <cfset result[i][1]=data.clientname[i]>
          <cfset result[i][2]=data.form[i]>
        </cfloop>
        
        <cfreturn result>
      </cffunction>
      
      <cffunction name="getForm" access="remote" returnType="array">
        <cfargument name="clientname" type="any" required="true">
        
        <cfset var data="">
        <cfset var result=ArrayNew(2)>
        <cfset var i=0>
        
        <cfquery name="data" datasource="#THIS.dsn#">
          SELECT clientname,form FROM clients WHERE clientname = #ARGUMENTS.clientname# ORDER BY form
        </cfquery>
        
        <cfloop index="i" from="1" to="#data.RecordCount#">
          <cfset result[i][1]=data.clientname[i]>
          <cfset result[i][2]=data.form[i]>
        </cfloop>
        
        <cfreturn result>
      </cffunction>
    
    </cfcomponent>
    test.cfm

    Code:
    <cfform>
    
    <table>
      <tr>
        <td>Select Company:</td>
        <td><cfselect name="clientname" bind="cfc:form.getCo()" bindonload="true" /></td>
      </tr>
      <tr>
        <td>Select Form:</td>
        <td><cfinput name="form" bind="cfc:form.getForm({clientname})" /></td>
      </tr>
    </table>
    
    </cfform>
    Thanks in advance for your assistance!
  6. #4
  7. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,277
    Rep Power
    968
    It sounds like you want to use something like CFDIV to load content into the page based on their form selelctions.

    http://livedocs.adobe.com/coldfusion...ocs/index.html

    It's old but this might also help: http://www.briankotek.com/blog/files...ation_code.zip. Part of an app I converted to AJAX many years ago. I haven't looked at it in years so you're on your own if you run into any issues with it, but it's the closest thing I have. Honestly, I've been using ExtJS for all of my HTML UIs for years so I haven't messed with the CF AJAX stuff in a long time.

    Comments on this post

    • BrandonG agrees
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    19
    Rep Power
    0
    Thank you Kiteless, the CFDIV was just what I was looking for. Thanks for the link to your old code, too. I will look over that when I'm not in such a time-crunch and see if some of this AJAX stuff starts to stick. Still having trouble w/ that and some other things. In the meantime I was able to make the CFDIV pull the "form" field from the DB dynamically so kudos for the pointer!

IMN logo majestic logo threadwatch logo seochat tools logo