CF Chained Selects

ndeeley

Hi there,

Does anyone know of a decent chained selects script in CF? I'd like one that can still accept query values from the database.

I found an excellent script on EasyCFM but because it uses a form I can't get it to work with my existing form on the page - clicking the dropdown executes the onSubmit action of my form and it errors out.

Expand|Select|Wrap|Line Numbers

 <!--- store the selected Main_Group variable variable after the first select boxes submits itself --->

<cfif isDefined('form.select_Main_Group')>

<cfset page.select_Main_Group = form.select_Main_Group>

</cfif> 

<cfoutput>

<form name="DropDown" method="post">

<!--- query DB for the first drop down list --->

<cfquery name="get_Main_Group" datasource="ds">

SELECT group_id, group_name

FROM tblGroups

</cfquery>

<!--- first drop down list --->

<!--- NOTICE the onChange javascript event in the select tag, this is what submits the form after the first selection --->

<select name="select_Main_Group" required="yes" onchange="this.form.submit()">

<option>Select Main Group</option>

<!--- dynamically populate the first drop down list based on the get_Main_Group query --->

<!--- NOTICE the CFIF within the option tag, this says, if the first selection has been made, display the chosen option when the page reloads --->

<cfloop query="get_Main_Group">

<option value="#group_id#" <cfif isDefined('form.select_Main_Group')><cfif form.select_Main_Group eq "#group_id#">selected</cfif></cfif>>#group_name#</option>

</cfloop>

</select>

<p>

<!--- if the first selection has been made, display the second drop down list with the appropriate results --->

<cfif isDefined('page.select_Main_Group')>

<!--- query DB for second drop down list, based on the selected item from the first list --->

<cfquery name="get_Sub_Group" datasource="ds">

SELECT group_id, subgroup_id, subgroup_name

FROM tblGroups 

WHERE group_id = #page.select_Main_Group# 

</cfquery>

<!--- second drop down list --->

<select name="select_Sub_Group" required="yes">

<option>Select Subgroup</option>

<!--- dynamically populate the second drop down list based on the get_Sub_Group query --->

<cfloop query="get_Sub_Group">

<option value="#subgroup_id#">#subgroup_name#</option>

</cfloop>

</select>

</cfif>

</form>

</cfoutput>

IF anyone has any ideas that might fix it, or any suggestions, it would be great!

Thanks
Neil

acoder

Replace the form with your form and elements. What does your form look like?

ndeeley

My form is a simple record filling one but has some onSubmit javascript that runs some error checking stuff. I've tried replacing the elements but the form just changes the dropdown instead of returning the values to the database.

acoder

Can you post the code for it?

ndeeley

Sure - let me dig up some of the old code as I had replaced it with some chained select javascript code. Ideally I would like the CF version as it's still dynamic, whereas the javascript is hard coded.

Here it is...

Expand|Select|Wrap|Line Numbers

 
<cfif isDefined('form.SchemeType')>

            <cfset page.SchemeType = form.SchemeType>

            </cfif>
 
                <cfoutput>

                <form action="action_addrecord.cfm" method="post" name="form" onsubmit="return formCheck(this);">
 
                <form name="" method="post">

                <cfquery name="get_Main_Group" datasource="wflow">

                select        SchemeType

                from        tblSchemeType

                </cfquery>        
 
                <tr>

                <td class="highlight" style="width: 160px;">Document Type:</td>

                <td><select name="SchemeType" required="yes" onchange="this.form.submit()" class="droplist">

                <option>Select Scheme Type</option>

                <cfloop query="get_Main_Group">

                <option value="#SchemeType#" <cfif isDefined('form.SchemeType')><cfif form.SchemeType EQ "#SchemeType#">selected</cfif></cfif>>

                #SchemeType#</option>

                </cfloop>

                </select>

                </td>

                </tr>
 
                <cfif isDefined('page.SchemeType')>

                <cfquery name="get_Sub_Group" datasource="wflow">

                select Document, Type, OrderList

                from tblDocType

                where Type = '#page.SchemeType#'

                order by OrderList

                </cfquery>

                </form>
 
                <tr>

                <td class="highlight" style="width: 160px;">Document Type:</td>

                <td><select name="DocumentType" required="yes" class="droplist">

                <option>Select Document Type</option>

                <cfloop query="get_Sub_Group">

                <option value="#Document#">#Document#</option>

                </cfloop>

                </select>

                </cfif>

                </td>

                </tr>
 
            </cfoutput>
 
            <input type="hidden" name="Digitiser" value="#LoginName#" />
 
            <tr>

            <td class="highlight" style="width: 160px;">Scheme / Project Code:</td>

            <td><input type="text" class="droplist" name="SchemeCode"  maxlength="40" size="40"></td>

            </tr>
 
            <tr>

            <td style="width: 180px;">Additional Scheme / Project Code:</td>

            <td><input type="text" class="droplist" name="AddSchemeCode"  maxlength="40" size="40"></td>

            </tr>
 
            <tr>

            <td class="highlight">Scheme Title:</td>

            <td colspan="3"><textarea class="droplist" name="SchemeTitle" cols="100" rows="3" wrap="virtual" class="droplist"></textarea></td>
 
            </tr>
 
            <tr>

            <td class="highlight">Main Drawing No:</td>

            <td><input type="text" class="droplist" name="DrawingNo" maxlength="40" size="40"></td>

            <td style="width: 150px;">Developer:</td>

            <td><input type="text" class="droplist" name="Developer" value=" " maxlength="30" size="26"></td>

            </tr>
 
            <tr>

            <td class="highlight">Received Date:</td>

            <td><input type="text" name="RecDate" maxlength="10" size="12" class="droplist" onMouseover="ddrivetip('Enter the date using the calendar', 200)"; onMouseout="hideddrivetip()" >

            <span style="padding-left: 5px;">

            <a href="javascript:showCal('CalRecDate')" class="calendar"><img src="http://marlin/assetinl/WorkFlow/graphics/calendar.jpg" border="0" onMouseover="ddrivetip('Adds the date to the input field', 180)"; onMouseout="hideddrivetip()" /></a>

            </td>

            <td class="highlight">Scheme Date:</td>

            <td><input type="text" name="SchemeDate" maxlength="10" size="12" class="droplist" onMouseover="ddrivetip('Enter the date using the calendar', 200)"; onMouseout="hideddrivetip()" >

            <span style="padding-left: 5px;">

            <a href="javascript:showCal('CalSchemeDate')" class="calendar"><img src="http://marlin/assetinl/WorkFlow/graphics/calendar.jpg" border="0" onMouseover="ddrivetip('Adds the date to the input field', 180)"; onMouseout="hideddrivetip()" /></a>

            </td>

            </tr>
 
            <tr>

            <td colspan="4" style="height: 10px;">

            </tr>
 
            <tr>

            <td colspan="4">

            <span class="headbanner">Sender Details</span>

            </td>

            </tr>
 
            <tr>

            <td style="width: 150px;">Sent By:</td>

            <td><input type="text" class="droplist" name="SentBy" value=" " maxlength="30" size="26"></td>

            <td style="width: 150px;">Company:</td>

            <td><select name="Company" size="1" class="droplist">

            <cfoutput query="GetCompany">

            <option value="#CompanyName#">#CompanyName#</option></cfoutput>

            </td>

            </tr>
 
            <tr>

            <td style="width: 150px;">OS Mapsheet:</td>

            <td><input type="text" class="droplist" name="OSRef" value=" " maxlength="12" size="26"></td>

            <td style="width: 150px;">or Coords:</td>

            <td style="width: 150px;">X: <input type="text" class="droplist" name="XRef" value=" " maxlength="10" size="6">

            Y: <input type="text" class="droplist" name="YRef" value=" " maxlength="10" size="6"></td>

            </tr>
 
            <tr>

            <td colspan="4" style="height: 10px;">

            </tr>
 
            <tr>

            <td colspan="4">

            <span class="headbanner">Other Information</span>

            </td>

            </tr>
 
            <tr>

            <td style="width: 150px;">Current Location:</td>

            <td colspan="3"><input type="text" name="PhysLoc" class="droplist"  maxlength="40" size="40"></td>

            </tr>
 
            <tr>

            <td style="width: 150px;">Notes:</td>

            <td colspan="3"><textarea name="RecordNotes" cols="100" rows="3" wrap="virtual" class="droplist" onMouseover="ddrivetip('Enter the scheme details here - what does it contain, or show?', 200)"; onMouseout="hideddrivetip()"></textarea></td>

            </tr>
 
            </table>
 
            <input type="hidden" name="DateRecordAdded" value="<cfoutput>#dateFormat(Now(), 'dd/mm/yyyy')#</cfoutput>" />

            <p />

            <input type="submit" class="buttons" value="Submit Record" />

            <input type="Reset" class="buttonswhite" value="Reset Form Fields" />
 
            </form>

            </div>

acoder

I see you have a nested form (see line 9). You should only have one form.

ndeeley

Yes...I found the script on EasyCfm and it just takes the values from the database table and passes them into the drop down. I have used the form as is and integrated it into the rest of my code but the onClick event runs the drop down - it doesn't post the record.

I`ll try and dig it out so you can see it.

ndeeley

Here's the code. I got it to work fine on its own, but couldn't integrate it into my form, because the onChange event tried to post the record.

This is Tutorial 166 from Easy CFM

Expand|Select|Wrap|Line Numbers

 <!--- store the selected Main_Group variable variable after the first select boxes submits itself --->

<cfif isDefined('form.select_Main_Group')>

    <cfset page.select_Main_Group = form.select_Main_Group>

</cfif>

<cfoutput>

  <form name="DropDown" method="post">

  <!--- query DB for the first drop down list --->

  <cfquery name="get_Main_Group" datasource="ds">

     SELECT group_id, group_name

     FROM tblGroups

  </cfquery>
 
  <!--- first drop down list --->

  <!--- NOTICE the onChange javascript event in the select tag, this is what submits the form after the first selection --->

  <select name="select_Main_Group" required="yes" onchange="this.form.submit()">

     <option>Select Main Group</option>

     <!--- dynamically populate the first drop down list based on the get_Main_Group query --->

     <!--- NOTICE the CFIF within the option tag, this says, if the first selection has been made, display the chosen option when the page reloads --->

     <cfloop query="get_Main_Group">

         <option value="#group_id#" <cfif isDefined('form.select_Main_Group')><cfif form.select_Main_Group eq "#group_id#">selected</cfif></cfif>>#group_name#</option>

     </cfloop>

</select>

<p>

<!--- if the first selection has been made, display the second drop down list with the appropriate results --->

<cfif isDefined('page.select_Main_Group')>

   <!--- query DB for second drop down list, based on the selected item from the first list --->

   <cfquery name="get_Sub_Group" datasource="ds">

        SELECT group_id, subgroup_id, subgroup_name

        FROM tblGroups 

        WHERE group_id = #page.select_Main_Group# 

   </cfquery>
 
   <!--- second drop down list --->

   <select name="select_Sub_Group" required="yes">

      <option>Select Subgroup</option>

      <!--- dynamically populate the second drop down list based on the get_Sub_Group query --->

      <cfloop query="get_Sub_Group">

         <option value="#subgroup_id#">#subgroup_name#</option>

      </cfloop>

   </select>

</cfif>

</form>

</cfoutput>
 
<!--- THAT'S ALL THERE IS TO IT! --->

acoder

One possible solution to this problem is to set a variable when the form is submitted via onchange. Then in your onsubmit validation code, check for this variable. If set, return true, so it doesn't validate before submitting.

ndeeley

Cunning...

Thanks acoder, i'll give it a try and let you know how I got on.

Cheers

acoder

If you want to get your hands dirty with JavaScript/Ajax, then there would be no need for a submit and hence no conflict, but I guess that depends on expertise and how much time you're willing to invest in this problem.

CF Chained Selects

re: CF Chained Selects

re: CF Chained Selects

re: CF Chained Selects

re: CF Chained Selects

re: CF Chained Selects

re: CF Chained Selects

re: CF Chained Selects

re: CF Chained Selects

re: CF Chained Selects

re: CF Chained Selects

Similar ColdFusion bytes

/bytes/development

/bytes/it

/bytes/about