Skip to main content
Inspiring
September 9, 2009
Question

Displaying data based on checkboxes

  • September 9, 2009
  • 2 replies
  • 1107 views

I have a series of checkboxes that I dynamically generate from a table . Each checkbox represents a state. If I check on a checkbox for a particular state, how can I display the cities for that state ? Or check more than one checkbox, display all the cities for each checkbox that was checked.

    This topic has been closed for replies.

    2 replies

    Inspiring
    September 10, 2009

    There's a bunch of AJAX stuff documented in the CF Developer's Guide: http://livedocs.adobe.com/coldfusion/8/htmldocs/ajaxui_1.html.

    Have a scan through that lot.  One can use bind statements to populate form controls and what-have-you, and also populate them based on the current value of other controls.

    --

    Adam

    ilssac
    Inspiring
    September 9, 2009

    <form....>

    ....

    <input type="checkbox" name="states" value="CA">

    <input type="checkbox" name="states" value="NA">

    <input type="checkbox" name="states" value="IA">

    <input type="checkbox" name="states" value="MA">

    ...

    </form>


    ......

    <cfoutput>#form.states#</cfoutput>

    <cfquery....>

         SELECT aField,bField,cField

         FROM aTable

         WHERE stateField IN (<cfqueryParam value="#form.states#" list="true" CFSQLType="CF_SQL_VARCHAR">)

    </cfquery>

    trojnfnAuthor
    Inspiring
    September 9, 2009

    Thanks for the response.

    In your example, are you submitting the form first, then performing the query ? I am trying something similar but the form is submitted.

    Is there a way to perform the query to display the data as soon as a checkbox is checked, without submitting the form ?

    ilssac
    Inspiring
    September 9, 2009

    Yes the dotted line in the middle indicates where the form is submitted and the query would be run on an action page.

    The only way that you could display data when the checkbox is clicked without submitting the form is if the data was already on the client.  This can be done with smaller sets of data.  You deliver all the data when the form is returned, store it in JavaScript structures and use this to modify the user interface when the user clicks contols.  But as the data size grows this can quickly become costly in bandwidth and application preformance as more and more data is delivered that may or may not ever be used.

    The next level is to submit the data when the checkbox is clicked, but do not refresh the entire page.  Two common approaches to do this are with an inline frame that can be refreshed when the data is submitted or with the xmlhttprequest() javascript object.  The latter being better known as AJAX.

    In other words, one way or another, be it the entire page, part of the page or in memory, the client must somehow make a request so that the server can responsd with new data, if the data has not already been delivered to the client.