Question

So need to do a query based on what is selected by the user. A dropdown menu with School, EID , Principal and Books are listed as options.When "School" is selected or clicked it would do a query on the sql-server database and throw in another drop down list for the user to select with all the values of the school. My English is not that great so this is what i mean

Dropdown -> If School is chosen - > kogod, SIS, Humane studies, Whartons school of Business etc. (from the database) will populate. -> if Wharton's is clicked it will show the table.So it is like a cascading dropdown based of off what is chosen..

So how do you do it? Code please give me the code. THanks

<cfform method="POST" action=""> <select name="one" required="yes" onchange="this.form.submit()">
<option>Select Type</option>
  <option value="school">School</option>
  <option value="EID">Electronic ID</option>
  <option value="prinical">Principal's Name</option>
  <option value="books">Books Used</option>
</select>
</cfform>

<cfquery name="schoollist" datasource="xxyyzz" dbtype="ODBC">
          select school_title, 
                      from DATABASENAME order by school_title
        </cfquery>

<cfif one.school is "selected?" from the first DROPDOWN then another drown down will pop up with the list of schools >

Help... Please

Was it helpful?

Solution

I wrote up a quick solution which you should be able to expand out to several levels deep easily enough. Currently it just handles the first layer where you select a value from the first drop down and it shows you the next but you can apply the same concept multiple times.

<cfif structKeyExists(form, "one") and form.one neq "">
    <cfswitch expression="#form.one#">
        <cfcase value="school">
            <cfquery name="schoollist" datasource="xxyyzz" dbtype="ODBC">
              select school_title, 
              from DATABASENAME order by school_title
            </cfquery>

            <select name="schoollist" required="yes" onchange="this.form.submit()">
                <cfoutput query="schoollist">
                    <option value="#schoollist.school_title#">#schoollist.school_title#</option>
                </cfoutput>
            </select>
        </cfcase>

        <cfcase value="EID">
            <cfquery name="eidlist" datasource="xxyyzz" dbtype="ODBC">
              select eid, 
              from DATABASENAME order by eid
            </cfquery>

            <select name="eidlist" required="yes" onchange="this.form.submit()">
                <cfoutput query="eidlist">
                    <option value="#eidlist.eid#">#eidlist.eid#</option>
                </cfoutput>
            </select>
        </cfcase>

        <cfcase value="principle">
            <cfquery name="principle" datasource="xxyyzz" dbtype="ODBC">
              select principle, 
              from DATABASENAME order by principle
            </cfquery>

            <select name="principleList" required="yes" onchange="this.form.submit()">
                <cfoutput query="principle">
                    <option value="#principle.principle#">#principle.principle#</option>
                </cfoutput>
            </select>
        </cfcase>

        <cfcase value="books">
            <cfquery name="books" datasource="xxyyzz" dbtype="ODBC">
              select books, 
              from DATABASENAME order by books
            </cfquery>

            <select name="books" required="yes" onchange="this.form.submit()">
                <cfoutput query="books">
                    <option value="#books.books#">#books.books#</option>
                </cfoutput>
            </select>
        </cfcase>
    </cfswitch>
<cfelse>
    <cfform method="POST" action="#cgi.script_name#"> 
        <select name="one" required="yes" onchange="this.form.submit()">
          <option>Select Type</option>
          <option value="school">School</option>
          <option value="EID">Electronic ID</option>
          <option value="prinical">Principal's Name</option>
          <option value="books">Books Used</option>
        </select>
    </cfform>
</cfif>

You might also be able to simplify the code by doing something like this but I don't have the ability to test this at the moment so you might have to play around with it to get it to work:

    <cfif structKeyExists(form, "dropdown") and form.dropdown neq "">
    <!--- prevent sql injection, also serves to convert text in the database to valid table and column names for the next query--->
    <cfset sanitizedString = rereplacenocase(form.dropdown,'[^a-z_]','','all')>
    <!--- get data for drop down based on user selection --->
    <cfif structKeyExists(form, "rootType")>
        <cfset tableName = rereplacenocase(form.rootType,'[^a-z_]','','all')>
        <cfquery name="getInfo" datasource="mysql">
            SELECT * 
            FROM #tableName#
            WHERE #tableName# = <cfqueryparam cfsqltype="CF_SQL_VARCHAR" value="#form.dropdown#">
        </cfquery>

        <cfif getInfo.recordCount gt 0>
            <cfdump var="#getInfo#">
        <cfelse>
            No records were found.
        </cfif>
    <cfelse>
        <cfquery name="getDropDownData" datasource="mysql">
          select #sanitizedString#
          from #sanitizedString# order by <cfqueryparam cfsqltype="CF_SQL_VARCHAR" value="#form.dropdown#">
        </cfquery>

        <cfform method="POST" action="#cgi.script_name#">
            <input type="hidden" name="rootType" value="<cfoutput>#form.dropdown#</cfoutput>">
            <select name="dropdown" required="yes" onchange="this.form.submit()">
                        <option value="">Select Value</option>
                <cfoutput query="getDropDownData">
                    <cfset val = getDropDownData["#sanitizedString#"]>
                    <option value='#val#'>#val#</option>
                </cfoutput>
            </select>
        </cfform>
    </cfif>
    <!--- redisplay the form --->

<cfelse>
    <cfform method="POST" action="#cgi.script_name#"> 
        <select name="dropdown" required="yes" onchange="this.form.submit()">
          <option>Select Type</option>
          <option value="school">School</option>
          <option value="EID">Electronic ID</option>
          <option value="principal">Principal's Name</option>
          <option value="books">Books Used</option>
        </select>
    </cfform>
</cfif>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top