Coldfusion interactive code pt 2

There are always little tricks that are simple to do to get things to appear as you’d like on a web page.  In a lot of Coldfusion forms, we have the opportunity for the interactive user to select more than one option for a field.  This is what the multi-select drop down is made for, however, most users tend to like to be able to see all that they’ve selected in one go, so instead we use a series of checkboxes.  There are two ways to store this information: one, we use the same form field name (and ID, which is technically a no-no, but whatever) and we can save or parse the comma delimited data that gets passed through the form, or we can set up field  names with some sort of numbering system (myfield_1) that we can loop over and parse that way.  I personally prefer the former, which is what this next piece of code will show.

<cfset count = 0>
<cfloop query="qMyQuery">
<cfset count = 1 + count>

<div style="width:15em; float:left;">
<label><input name="SitesList" type="checkbox" class="text" id="SitesList" value="#qMyQuery.SiteID#" <cfif listfind(form.siteslist,qMyQuery.SiteID) gt 0>checked="checked"</cfif>  size="40" />#qMyQuery.SiteName#</label></div>
<cfif count mod 4 is 0><br style="clear:both;" /><cfset count = 0></cfif>
</cfloop>

This simple loop goes over a query and styles up some checkboxes into a four column listing.  We keep track of how many are currently shown in the row with the count variable, and when it hits 4 (using mod, which is probably my favorite math operator) we bounce down a line and start the next row.  Since I am storing the IDs as a ‘list’ in the database, I can check against the list that exists (which prepopulated the form variable) and give it a checkmark if it’s found.  I use label in this instance as a wrapper, since I suppose you’re ‘supposed’ to give the label for attribute the ID, but since we have multiple IDs, I wrap it around the element.  This way we don’t have to be precise with our clicks when trying to click on the checkbox, we simply have to click close to or on the name.