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

    Join Date
    Mar 2003
    Posts
    147
    Rep Power
    12

    Dynamic forms with CF


    Hey guys, I'm doing some work with coldfusion and I'm in need of help regarding dynamic forms. What I'm doing right now is quering a database and having the results go into a <cfselect>(courseName) tag. What I need to happen is have another <cfselect>(courseRev) tag populated based on the selection in the courseName tag.

    My plan was to have enabled="no" but that only works for flash apparently so that's not an option.

    The content of the courseRev tag is going to be the results of a query, which will change based on the value of courseName.

    Are there any ways to update a <cfselect> tag without having to reload the page with every change? I looked into using javascript but couldn't find what I needed on google.

    Thanks for the help.
    Last edited by nindoja; June 4th, 2007 at 11:25 AM.
  2. #2
  3. Green-River-Media.com
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2004
    Posts
    858
    Rep Power
    62
    why dont you just do regular forms with a javascript effect?
    Web Developer
    Green-River-Media.com
  4. #3
  5. Meatball Surgeon
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jul 2004
    Location
    Elbow deep in code
    Posts
    2,056
    Rep Power
    1321
    I agree. Try searching for Dynamic dropdowns, you will find tons of examples.
    Three gigs for the secretaries fair
    Seven gigs for the system source
    Nine gigs for the coders in smoky lairs
    One disk to rule them all, one disk to bind them
    One disk to hold the files, and in the darkness grind'em
    ---------------------------------------------------
    It is by caffeine alone that I set my mind in motion.
    It is by the beans of Java, that my thoughts acquire speed.
    The hand acquire shakes; the shakes become a warning.
    It is by caffeine alone that I set my mind in motion.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    147
    Rep Power
    12
    unless I've missed the point of javascript, I can't access a database using client-side javascript, right?

    A good example of what I would like to do is at cars.com, how you select a make and it updates the model field with models for that specific make. I'd like to avoid switching from CF to jsp's because our work place is moving to coldfusion and my boss wants this project to do the same.

    I'll look into the dynamic dropdowns and report back in a little.
  8. #5
  9. Green-River-Media.com
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2004
    Posts
    858
    Rep Power
    62
    no you cant, but the way that javascript works is that you can output javascript code using cf code either in an external .js file or on the page itself there so it really doesnt matter...
    Web Developer
    Green-River-Media.com
  10. #6
  11. Meatball Surgeon
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jul 2004
    Location
    Elbow deep in code
    Posts
    2,056
    Rep Power
    1321
    Here is some sample code that i use.

    var NumberOfFunctions=document.main.Function.options.length
    var FunctionRDArray=new Array(NumberOfFunctions)
    FunctionRDArray[0]=new Array()
    FunctionRDArray[0][0]=new Option("Please Specify","")

    <cfloop index="i" from="1" to="#function.recordcount#">
    FunctionRDArray[<cfoutput>#i#</cfoutput>]=new Array()
    <cfquery name="selectedFunctionRD" dbtype="query">
    select RD_number from FunctionRD where Function = '#function.function[i]#' order by sorting
    </cfquery>
    <cfoutput query="selectedFunctionRD">
    FunctionRDArray[#i#][#selectedFunctionRD.CurrentRow#]=new Option('#JSStringFormat(selectedFunctionRD.RD_Number)#','#JSStringFormat(selectedFunctionRD.RD_Numbe r)#')
    </cfoutput>
    </cfloop>
    var temp=document.main.RD;

    FindRD(document.main.Function.options.selectedIndex);
    function redirect(x){

    for (m=temp.options.length-1;m>0;m--)
    temp.options[m]=null
    for (i=1;i<FunctionRDArray[x].length;i++){
    temp.options[i]=new Option(FunctionRDArray[x][i].text,FunctionRDArray[x][i].value)
    }
    temp.options[0].selected=true
    }

    var temp=document.main.RD

    function FindRD(PickedFunction){
    for (m=temp.options.length-1;m>0;m--)
    temp.options[m]=null
    for (i=1;i<FunctionRDArray[PickedFunction].length;i++){
    temp.options[i]=new Option(FunctionRDArray[PickedFunction][i].text,FunctionRDArray[PickedFunction][i].value)
    }
    if (document.main.firstload.value == 'YES')
    {temp.options[0].text='Please Specify';
    temp.options[0].value='';
    document.main.firstload.value='NO';}
    temp.options[0].selected=true
    }
    Three gigs for the secretaries fair
    Seven gigs for the system source
    Nine gigs for the coders in smoky lairs
    One disk to rule them all, one disk to bind them
    One disk to hold the files, and in the darkness grind'em
    ---------------------------------------------------
    It is by caffeine alone that I set my mind in motion.
    It is by the beans of Java, that my thoughts acquire speed.
    The hand acquire shakes; the shakes become a warning.
    It is by caffeine alone that I set my mind in motion.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    147
    Rep Power
    12
    so I think I understand what's going on, but I'm not sure what the variables function and functionRD are supposed to be defined as.

    Thanks for the help so far guys, I'm still investigating the issue and you guys have helped a lot.
  14. #8
  15. Meatball Surgeon
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jul 2004
    Location
    Elbow deep in code
    Posts
    2,056
    Rep Power
    1321
    sorry, to make things alittle more legible to you, think of function as State and RD as city. Its whatever your data is
    Three gigs for the secretaries fair
    Seven gigs for the system source
    Nine gigs for the coders in smoky lairs
    One disk to rule them all, one disk to bind them
    One disk to hold the files, and in the darkness grind'em
    ---------------------------------------------------
    It is by caffeine alone that I set my mind in motion.
    It is by the beans of Java, that my thoughts acquire speed.
    The hand acquire shakes; the shakes become a warning.
    It is by caffeine alone that I set my mind in motion.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    147
    Rep Power
    12
    thanks for the quick reply, I'll get working on it and see if I come across any other questions.
  18. #10
  19. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,273
    Rep Power
    968
    There are a couple of ways to do this. You can pre-populate one or more JavaScript arrays when the page loads, and populate the second drop down based on the selection in the first drop down. This is what Ebot is showing. I believe there are also some custom tags that make this pretty easy (the ColdFusion Exchange has several at http://www.adobe.com/cfusion/exchang...&Submit=Search )

    The second is to use one of the AJAX libraries to run a background request to the server.

    The third is to try out ColdFusion 8, which adds numerous built-in AJAX capabilities. Doing dynamic AJAX requests to populate select boxes can be done in just by binding the select boxes to server-side CFC methods (http://www.forta.com/blog/index.cfm/...elated-Selects ).
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    147
    Rep Power
    12
    thanks for the link kiteless, I checked the exchange but apparently searching for 'select' vs. 'related select' makes results appear.

    Funny that you mention using CF8, as by the time this project is finished I think we are planning on rolling out CF8 (assuming it's released on time).
  22. #12
  23. Green-River-Media.com
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2004
    Posts
    858
    Rep Power
    62
    so download the public beta of cf8 and try it out!
    Web Developer
    Green-River-Media.com
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2004
    Posts
    22
    Rep Power
    0
    I've done something like this before, having what is essentially a parent select which displays a different child depending on which item is selected in the parent.

    I'd have my parent select box populated by my initial query, then I'd actually do all possible child queries by looping through my parent query and selecting all of the possible children for each parent. I'd populate a separate child select box for each parent, and initially make all children select boxes disabled and hidden using css. I'd then use a javascript function for the onchange event of the parent select, which would hide and disable all children (or the specific child select that was currently displayed if I felt like getting fancy), then would enable and display the appropriate child select for the selected parent.

    It worked well for my purposes, but if you have a huge number of parents and a huge number of children, the initial page load may take up a good chunk of time because of the number of queries it has to run, and I'm not sure that method would be the best -- especially if it's a large form with lots of input validation and there's a high potential of the page being reloaded over and over until the input is well-formatted.

IMN logo majestic logo threadwatch logo seochat tools logo