How to Dynamically Check a Radio Button (and Checkbox) in ColdFusion

Although this may seem to be a simple task, dynamically checking a radio button in ColdFusion is not always as easy as dynamically checking a checkbox in ColdFusion. It's definitely not difficult either. I just thought it might be worth a mention here.

Let's first look at how to dynamically check a checkbox in ColdFusion.

Checkboxes are cool. You see them everywhere in forms throughout the web. And, let's face it, they're extremely easy to use. When used in conjunction with XHTML labels, they're even easier to use for visitors. For example, if you have a label next to a checkbox input, you can wrap the label with a "label tag" which then makes the label itself "clickable." Simply match the label tag with the checkbox input tag name. Here's an example:


<cfform action="javascript:void();"
        method="post"
        name="form1"
        id="form1">


    <div class="formItem">
        <cfinput     type="checkbox"
                    name="ckAgree"
                    id="ckAgree"
                    value="1" />

        <label for="ckAgree">I agree</label>
    </div>

    <div class="formSubmit">
        <cfinput     type="submit"
                    name="submit"
                    label="Submit"
                    value="Submit"
                    validate="submitonce"
                    onkeyup="javascript:alert('Submitted!');"
                    onclick="javascript:alert('Submitted!');" />

    </div>

</cfform>

For me, the most common use of a checkbox input is in back-end admin areas to determine whether or not a particular record is active or not. This only requires me to have an "IsActive" field for the record in the database table with a boolean type (yes or no, true or false, 0 or 1). I usually set the default value to true so that when a record is added to the database, it automatically becomes "active" on the back-end. When a back-end user attempts to update the "active" record, they will (or should) see a "checked" checkbox with an "Is Active" label next to it. Once the back-end user no longer needs the record to be active, they simply un-check the "Is Active" checkbox and click submit.

Now that the item has been archived, when the back-end user attempts to update the record again, the "Is Active" checkbox shouldn't be "checked" now, should it? So, how do I dynamically check the checkbox?

Since I'm updating a database record, I'll need a query to get the current values of the records' fields. So we'll want to make sure the query contains the "IsActive" field. Assuming it does, just call the query and set the checked value to the query's "IsActive" value. Like so:


<!--- get details for the current record --->
<cfinvoke     component="extensions.components.myqueries"
            method="getQueryDetails"
            returnvariable="returnQueryDetails">

<cfif isDefined("URL.id") AND isNumeric(val(URL.id))>
        <cfinvokeargument name="id" value="#val(URL.id)#" />
</cfif>
</cfinvoke>

<cfif returnQueryDetails.recordcount EQ 1>

    <cfform action="#CGI.script_name#?#CGI.query_string#"
            method="post"
            name="form1"
            id="form1">

    
        <div class="formItem">
            <!--- dynamically check the checkbox --->
            <cfinput     type="checkbox"
                        name="ckIsActive"
                        id="ckIsActive"
                        value="1"
                        checked="#returnQueryDetails.IsActive#" />

            <label for="ckIsActive">Is Active</label>
        </div>
    
        <div class="formSubmit">
            <cfinput     type="submit"
                        name="submit"
                        label="Submit"
                        value="Submit"
                        validate="submitonce"
                        onkeyup="javascript:alert('Submitted!');"
                        onclick="javascript:alert('Submitted!');" />

        </div>
    
    </cfform>

    <cfelse>
    <p>Sorry, the selected record is no longer available.</p>
</cfif>

In the update query, to capture the new value, I use something similar to the following:


<!--- IsActive --->
, IsActive=<cfif IsDefined("FORM.isActive") AND isBoolean(FORM.isActive)>
<cfqueryparam value="#FORM.isActive#" cfsqltype="cf_sql_bit" />
<cfelse><cfqueryparam value="0" cfsqltype="cf_sql_bit" /></cfif>

If you're not using a query, the following code might also be helpful in dynamically checking a checkbox:


<!--- scope var --->
<cfparam name="isActive" default="0" type="boolean" />

<!--- set the current value of the variable --->
<cfset isActive = 1 />

<cfinput     type="checkbox"
            name="IsActive"
            value="1"
            checked="#IsActive#" />

Another reason for showing the code above is because it's similar to how I'll be dynamically checking a radio button. The previous code snippet should be easy enough to follow. We're simply setting the value of the variable "isActive" to equal true. Then, the checkbox input's "checked" state is set to be dependent upon the "isActive" variable. I guess it's easier to read the code than it is to articulate the meaning, eh?

So, as you may already know, radio buttons are used when you want to offer one, and only one, option from a list of options. We keep the list of options tied together with the "name" attribute. The "name" attribute simply groups the options together, so that of all options sharing the same "name," only one is actually selected. There are two differentiating attributes, one of which is obviously the "value" which is needed for passing to the database, etc. The other differentiating attribute is the "id." I use the "id" attribute to tie to the label tag. For usability, you should also use the "label" tag which will also allow the user to simply click the option label to select the desired radio button.

Let's assume you have two queries to work with. One contains the list of possible options for the radio buttons. The other query pulls the existing values for the specified record. The idea here is that we'll output all possible options for the radio button, then check to see if our current record has selected the option being looped over. If so, then "check" it. If not, don't. Simple enough, eh? Let's take a look at the code I've come up:


<!--- get details for the current record --->
<cfinvoke     component="extensions.components.myqueries"
            method="getQueryDetails"
            returnvariable="returnQueryDetails">

<cfif isDefined("URL.id") AND isNumeric(val(URL.id))>
            <cfinvokeargument name="id" value="#val(URL.id)#" />
</cfif>
</cfinvoke>

<!--- get options for radio buttons --->
<cfinvoke     component="extensions.components.myqueries"
            method="getRadioButtonOptions"
            returnvariable="returnRadioButtonOptions" />


<!--- scope var --->
<cfparam name="IsChecked" default="0" type="boolean" />

<cfif returnQueryDetails.recordcount EQ 1>

    <cfform action="#CGI.script_name#?#CGI.query_string#"
            method="post"
            name="form1"
            id="form1">


        <cfoutput query="returnRadioButtonOptions">

            <!---
                This should be self-explanatory, but just in case, this is where we
                set the current value of the isChecked variable based on whether or
                not the currently outputted query item matches the value of the
                currently selected record.
            --->

            <cfif returnQueryDetails.OptionID EQ returnRadioButtonOptions.OptionID>
                <cfset isChecked = 1 />
                <cfelse>
                <cfset isChecked = 0 />
            </cfif>

            <div class="formItem">
                <cfinput     type="radio"
                            name="OptionID"
                            id="Choice#OptionID#"
                            value="#OptionID#"
                            required="yes"
                            message="Please select a radio button."
                            checked="#isChecked#" />

                <!--- usability: if user clicks the title, the option should also be selected --->
                <label for="Choice#OptionID#">#htmleditformat(OptionTitle)#</label>
            </div>

            <div class="formSubmit">
                <cfinput     type="submit"
                            name="submit"
                            label="Submit"
                            value="Submit"
                            validate="submitonce"
                            onkeyup="javascript:alert('Submitted!');"
                            onclick="javascript:alert('Submitted!');" />

            </div>

        </cfoutput>

    </cfform>
    
    <cfelse>
    <p>Sorry, the selected record is no longer available.</p>
</cfif>

That's pretty much it folks. If you have a different way to handle this, please feel free to share. Hope this helps!

To learn more about the CFInput tag, visit http://cfquickdocs.com/cf8/?getDoc=cfinput#cfinput

Comments
Thanks for the ideas. I was struggling with the dynamic pre-populating of cfinput/radio field.
# Posted By Kelly | 12/9/08 9:15 AM
@Kelly,
You are most welcome.
# Posted By Stephen Withington | 12/10/08 10:04 PM
+1 on the radio button, thanks!
# Posted By Andrew | 7/17/09 12:54 PM
The article help every user to check radio button importance from the check box. The cold fusion https://www.collegessaywriter.com/ website is knows everything about these dynamic articles and essay online book resources.
# Posted By Gerald | 9/23/18 7:26 AM
I've been coming on this blog for a long time and it has allowed me to do things even on https://aussiessayservices.com/ausuperiorpapers-co.... I think that people are too smart to think about it and even work on it for sure.
# Posted By james | 10/9/18 9:03 AM

ellys hair and beauty balmain hair dress reviews http://www.wigsnew.co.uk tape in extensions length unice wigs reviews http://www.hairflair.org.uk grey hair extensions human luxy hair extensions customer service number https://www.moptopz.co.ukhair mist superdrug hair mask for damaged hair https://www.humanhairwig.org.uk hair couture clip in extensions reviews primark hair extensions https://www.wigsandclips.co.uk
# Posted By VS | 11/4/18 8:50 PM
After visiting here you will be able to find out all those ways by which you work remembering password in microsoft edge will be all easier as this portal includes all advantageous information.
# Posted By remember password microsoft edge | 12/11/18 1:50 AM
Eh oui et aussi pas vraiment. Certes en effet on détermine de nouvelles sources qui se référent les memes significations. Non étant donné que il n’est pas suffisant de répéter ce que tout le monde est en mesure de voir chez certains sites tiers puis le traduire tant simplement?
# Posted By satta bazar | 2/12/19 6:00 AM
Its like you read my mind! You appear to know so much about this, like you wrote the book in it or something. I think that you can do with a few pics to drive the message home a little bit, but instead of that, this is wonderful blog. A great read. I will definitely be back.
# Posted By matka | 2/12/19 6:01 AM
My spouse and i were really delighted Emmanuel managed to finish up his investigations because of the precious recommendations he gained from your own web site. It is now and again perplexing to simply find yourself giving freely steps that some other people may have been selling. And we also realize we now have you to give thanks to for that. These explanations you have made, the straightforward web site menu, the relationships you assist to engender – it is mostly wonderful, and it is leading our son in addition to us do think this issue is exciting, which is certainly especially fundamental. Many thanks for the whole lot!
# Posted By satta market | 2/12/19 6:01 AM
As the expert, I can assist. Together we can find the decision.
# Posted By satta matka news | 2/12/19 6:12 AM
Many thanks for the excellent post C I had fun reading it! That i love this blog.
# Posted By pilefoundation.co.uk | 2/27/19 5:47 AM
When I originally commented I clicked the -Notify me when new comments are added- checkbox now every time a comment is added I get four emails sticking with the same comment. Will there be by any means you’ll be able to eliminate me from that service? Thanks!
# Posted By custom printed cds | 2/28/19 7:09 AM

© 2019, Stephen J. Withington, Jr.  |  BlogCFC was created by Raymond Camden – Version 5.9.004

Creative Commons License  |  This work is licensed under a Creative Commons Attribution 3.0 Unported License.  |  Hosted by Hostek.com