Binding checkboxes in flash forms
If you ever tried to bind a checkbox in a flash form, your experience may have been something like this:
- Tried using the bind attribute: bind="{ myField.selected}" and didn't see anything happening to the checkbox.
- Tried using the bind syntax in the checked attribute: checked="{myField.selected}" or similar, only to get a ColdFusion error message: “Attribute validation error for tag CFINPUT. The value of the attribute CHECKED is invalid…”
- Finally gave up and added the action to the onchange attribute of the field you wanted to bind to:
onchange="myCheckbox.selected= myField.selected"
While the last step works, it may mean that all other fields use the binding expect for the checkbox (you will run into other problems with radio buttons :( )
It just so happens that flash form checkboxes do not work as html checkboxes. In html we can have several checkboxes with the same name and the action page will get a list of the checked values. In flash forms, we can’t do that. If we do so, we will get the following compilation error: “id ‘nameOfCheckbox’ was already defined on line [some number]”. That means we need to have a different name for every checkbox. In the action page we get true/false depending whether the checkbox was selected or not, not the checkbox value, which is completely ignored.
Going back to the binding, we can use the “value” attribute instead and bind it to other controls. The simplest example, where the second checkbox is bound to the first one:
<cfinput type="checkbox" name="checkbox1">
<cfinput type="checkbox" name="checkbox2" value="{checkbox1.selected}" label="Second">
Note: checkbox must have a label (it won’t compile otherwise) because if there is no label, it takes the value attribute and because the value with the binding evaluates to Boolean, it won’t be accepted as a label, which should be a string.
The value should be a Boolean expression, something that is already true/false, like checkbox1.selected or something that evaluates to true/false, like myField.text == 'monkey'
That is the reason why if we want to bind to a column in a cfgrid, even if is it a Boolean column, we must write: {myGrid.selectedItem.checked=='true'}
View live example
Download source
Last note: there is a small bug if the grid is editable, but you get the idea.
Brian Rinaldi
Tony Bianco
Kurtis D. Leatham
Sid Wood
Nahuel
What do you mean by a dynamic list of checkboxes, is that a repeater?
Sid Wood
Steve Sequenzia
I am trying to bind based on radio buttons and it is not working. Here is part of my code:
<cfform name="form1" format="flash">
<cfinput name="assign" type="radio" value="1" label="Assign to Tech">
<cfinput name="assign" type="radio" value="2" label="Assign to Queue">
<cfinput type="text" name="tech" label="Assign to tech" width="150" visible="{assign.selectedData}">
<cfinput type="text" name="queue" label="Assign to queue" width="150" visible="{assign.selectedData}">
</cfform>
As you can see, I am trying to make input boxes visible based on which radio button is selected. I would like for the boxes not to be visible unless the appropriate radio button is selected, but I am not sure how to do it.
Any help on this would be greatly appreciated.
Thanks
Connie Decinko
Nolan Dubeau
Laura
Try doing the following:
{myGrid.selectedItem.checked.toString()=='true'}
(remember that checked is simply the name of the column)
The problem is that when the data comes from remoting is a true boolean, but when the data loads normally, it is a string if I remember correctly.
Prem
<cfformitem type="script">
function changeNewRepairPanel():Void {
if (newrepair.selectedData == "N") {
newpanel.visible = true;
newpanel.width = 250;
} else {
newpanel.visible = false;
newpanel.width = -1;
}
if (newrepair.selectedData == "R") {
repairpanel.visible = true;
repairpanel.width = 250;
} else {
repairpanel.visible = false;
repairpanel.width = -1;
}
}
</cfformitem>
Prem
I have found a slightly lengthy workaround. I was wondering if anyone found an easy way.
Juha
Thomary
This works fine for me. Now if the checkbox is true in the database this checkbox is checked. Now if I uncheck it how do I get the database to show false? or vise versa? I thought I could do a <cfif isdefined("form.selectedChbx")> OR
<cfif isdefined("form.selectedChbx")> is true>
set databasename = "true",
It seems the value =='true' always makes the isdefined equal to true.
Please any help would be greatly appreciated.
Jedale
I am trying to insert radio buttons at the bottom of the form that will make different panels visible or invisible depending on which radio button is selected. I have a working version with checkboxes which disables others based on if it was checked or not. I would like to have my users select radio buttons because then you wouldn't have to uncheck a box to check another. It would be alot smoother with radio buttons! Is this possible with a radio button and the use of actionscript? I am having no luck with them.
The code that I have been using to work this problem is below...
Thank you in advance!
Jeff
<cfform action="#cgi.script_name#" method="post" name="addressBook" format="flash" width="100%" height="100%">
<cfformgroup type="vbox" style="verticalGap:2" width="700">
<cfformgroup type="panel" label="Preview">
</cfformgroup>
<!--- visible and height bounded to editShow checkbox --->
<cfformgroup type="panel" visible="{edit[2] != true}" height="{edit[2] != true ? 200 : 0}"
label="Edit Personal Information">
</cfformgroup>
<!--- visible and height bounded to editEmergency Contacts checkbox --->
<cfformgroup type="panel" visible="{edit[3] != true}" height="{edit[3] != true ? 200 : 0}"
label="Edit Personal Information">
</cfformgroup>
<cfformgroup type="panel" height="23">
<cfformgroup type="horizontal">
<!--- edit checkbox's are initially unchecked --->
<cfinput type="radio" name="edit" value="none" label="Preview"/>
<cfinput type="radio" name="edit" value="editShow" label="Show Edit Window"/>
<cfinput type="radio" name="edit" value="editContact" label="Show Contacts Window"/>
</cfformgroup>
</cfformgroup>
</cfformgroup>
</cfformgroup>
</cfform>
Rodrigo
<cfform name="Frm_docs"
format="flash"
preloader="true">
<cfformgroup type="panel"
width="100%"
label="My Stuff">
<cfinput type="hidden" name="hdn_coord_id" value="14">
<cfinput type="radio" name="rd_action" value="true" label="Accept" checked="yes">
<cfinput type="radio" name="rd_action" value="false" label="Reject">
</cfformgroup>
<cfformgroup type="hbox">
<cftextarea name="txt_docInfo"
enabled="{rd_action.selectedData}"
cols="20"
rows="5"
label="Type some info here!">This must be disabled when checking on "Reject"!</cftextarea>
<cfinput type="text" bind="{rd_action.selectedData}" name="test_radio" enabled="false" label="Radio group value test">
<cfinput type="submit"
name="btn_update"
value="Save Changes">
</cfformgroup>
</cfform>
NE IDEAS?
Rodrigo
Thnx ne way!
<cfform name="Frm_docs"
format="flash"
preloader="true">
<cfformitem type="script">
function changeStats()
{
if(rd_action.selectedData == "true"){
txt_docInfo.enabled = true;
}
else
{
txt_docInfo.enabled = false;
}
}
</cfformitem>
<cfformgroup type="panel"
width="100%"
label="My Stuff">
<cfinput type="hidden" name="hdn_coord_id" value="14">
<cfinput type="radio" name="rd_action" value="true" label="Accept" checked="yes" onclick="changeStats()">
<cfinput type="radio" name="rd_action" value="false" label="Reject" onclick="changeStats()">
</cfformgroup>
<cfformgroup type="hbox">
<cftextarea name="txt_docInfo"
cols="20"
rows="5"
label="Type some info here!">This must be disabled when checking on "Reject"!</cftextarea>
<cfinput type="submit"
name="btn_update"
value="Save Changes">
</cfformgroup>
</cfform>
Ray
<cfsavecontent variable="gridChange">
<!--- function that gets called when grid selection changes, used to bind other controls to grid values --->
for(var i=0; i < ProjType.length; i++){
ProjType.selectedIndex = i
if(ProjType.selectedItem.data == project_grid.dataProvider[project_grid.selectedIndex]['ProjType']){
break;
}
}
for(var i=0; i < ProjMgr.length; i++){
ProjMgr.selectedIndex = i
if(ProjMgr.selectedItem.data == project_grid.dataProvider[project_grid.selectedIndex]['ProjMgr']){
break;
}
}
</cfsavecontent>
<cfgrid name="project_grid" query="allProjects" selectmode="row" colheaders="yes" rowheaders="no" width="600" height="150" format="Flash"
onChange="#gridChange#">
<cfgridcolumn name="ProjID" header="ID">
<cfgridcolumn name="ProjName" header="Name">
<cfgridcolumn name="ProjType" header="Type">
<cfgridcolumn name="lname" header="Last Name">
<cfgridcolumn name="fname" header="First Name">
<cfgridcolumn name="SetupDate" header="Setup Date" mask="mm/dd/yyyy">
<cfgridcolumn name="Subsys" header="Subsystem">
</cfgrid>
<cfformgroup type="horizontal" label="Subsystem:">
<cfinput type="radio" name="Subsys" value="True"
label="Yes"
onChange="#changeRowStatus#">
<cfinput type="radio" name="Subsys" value="False" checked="yes"
label="No"
onChange="#changeRowStatus#">
</cfformgroup>
</cfform>
Laura
Radio buttons are a different beast. See the Real Estate article where we explain how to bind controls to a grid: http://www.adobe.com/devnet/coldfusion/articles/flashforms_pt2_03.html
Chaz
How can I display a radio button in a datagrid cell?
I know how to do a check box.
Thanks
Laura
Short answer is you can't.
Long answer is you can use hacks we don't endorse.
Ray
Thank you for the response, I have decided to ditch the radio buttons and use the checkbox instead. I do have another question though.
Is it possible to display a selectbox inside a cfgrid??
If so, can it be populated via a query?
Thanks!!
Laura
My response to the select box is the same as my previous response to Chaz about radio buttons.
Jeff
Thanks for your time!
Jeff
here is some code that I am using to get me started: (It only binds the first Program to the repeater.)
<cfformgroup type="tile" height="120" id="tiles" style="verticalGap:5; margin-left:90; margin-right:30;">
<cfformgroup type="repeater" query="GetNonEELVPrograms" required="yes">
<cfinput type="checkbox" name="NonEELVProgramID" label="{GetNonEELVPrograms.currentItem.Program}" width="120"tooltip="Check box to select the {GetNonEELVPrograms.currentItem.Program} program." value="{contactList1.selectedItem.Program == GetNonEELVPrograms.currentItem.Program? true:false}">
</cfformgroup>
</cfformgroup>
<cfgrid name="contactList1" query="MyEOW" rowheaders="false" height="360" colheaderalign="center" colheaderfontsize="12" colheaderbold="yes" onchange="for (var i:Number = 0; i<PrimaryAuthorID.length; i++) {if (PrimaryAuthorID.getItemAt([i]).data == contactList1.selectedItem.AuthorID) PrimaryAuthorID.selectedIndex = i}">
<cfgridcolumn name="EOWRID" display="no">
<cfgridcolumn name="Title" header="Title" width="150">
<cfgridcolumn name="Input" header="Details">
<cfgridcolumn name="Date" header="Date" mask="mm/dd/yyyy" width="90">
</cfgrid>
Gary Gorman
Kelly
<cfinput type="checkbox" name="hidePeer" label="Hide from Peer" value="{(goalGrid.selectedItem!=undefined)?goalGrid.selectedItem.GOAL_HIDE_ON_PEER_FLAG:false}" />
Jeff
{goalGrid.selectedItem.GOAL_HIDE_ON_PEER_FLAG != undefined}
Rey
how can I show radio buttons cheked based on a yes or no value when the user selects a record from a grid?
<cfinput type="radio" name="cater_reminderB" label="yes" value="Yes" checked="yes" />
<cfinput type="radio" name="cater_reminderB" label="no" value="No" checked="no" />
I tried doing onChange="{data.selectedData}" this does not work. I don't get it I can bind a text box just fine but not a radiobutton macromedia or Adobe should have perfected this before releasing this flashform stuff.
Mr. T
I'm hoping this is the right place to post this. I'm trying to bind a set of fields based off a checkbox. I know it's going to be something simple but I cannot get my head around it.
The code is:
<cfform name="new_vendor_request" format="flash" width="600" height="600" skin="halosilver">
<cfformgroup type="panel" label="New Vendor Request" style="background-color:##CCCCCC; headerHeight: 0;">
<cfformgroup type="tabnavigator" id="tabs">
<cfformgroup type="page" label="Step 1">
<cfformgroup type="hbox">
<cfformgroup type="panel" label="Vendor Pay Details" style="headerHeight: 13;">
<cfformgroup type="vbox">
<cfinput type="checkbox" name="purchasingSite" label="Purchasing Site" value="yes">
<cfinput type="hidden" name="paySite" value="true">
<cfinput type="text" name="payAddy1" width="300" label="Address Line 1:" required="yes" message="(Pay Details) Please enter the address.">
<cfinput type="text" name="payAddy2" width="300" label="Address Line 2:">
<cfinput type="text" name="payAddy3" width="300" label="Address Line 3:">
<cfinput type="text" name="payAddy4" width="300" label="Address Line 4:">
<cfinput type="text" name="payCity" width="300" label="City:" required="yes" message="(Pay Details) Please enter the city.">
<cfinput type="text" name="payState" width="300" label="State:" required="yes" message="(Pay Details) Please enter the state.">
<cfinput type="text" name="payPostcode" width="300" label="Postcode:" required="yes" message="(Pay Details) Please enter the postcode.">
<cfinput type="text" name="payCountry" width="300" label="Country:" required="yes" message="(Pay Details) Please enter the country.">
<cfinput type="checkbox" name="copyToPayAddress" label="Is the above the same for Purchasing Address?">
</cfformgroup>
<cfinput type="button" width="100" name="cnt_step4" label="next" value="Next" onClick="tabs.selectedIndex=tabs.selectedIndex+1" align="right">
</cfformgroup>
</cfformgroup>
</cfformgroup>
<cfformgroup type="page" label="Step 2">
<cfformgroup type="hbox">
<cfformgroup type="panel" label="Vendor Purchasing Details" style="headerHeight: 13;">
<cfformgroup type="vbox">
<cfinput type="text" name="purchAddy1" width="300" label="Address Line 1:" required="yes" message="(Purchasing Details) Please enter the address.">
<cfinput type="text" name="purchAddy2" width="300" label="Address Line 2:">
<cfinput type="text" name="purchAddy3" width="300" label="Address Line 3:">
<cfinput type="text" name="purchAddy4" width="300" label="Address Line 4:">
<cfinput type="text" name="purchCity" width="300" label="City:" required="yes" message="(Purchasing Details) Please enter the city.">
<cfinput type="text" name="purchState" width="300" label="State:" required="yes" message="(Purchasing Details) Please enter the state.">
<cfinput type="text" name="purchPostcode" width="300" label="Postcode:" required="yes" message="(Purchasing Details) Please enter the postcode.">
<cfinput type="text" name="purchCountry" width="300" label="Country:" required="yes" message="(Purchasing Details) Please enter the country.">
</cfformgroup>
</cfformgroup>
</cfformgroup>
<cfformgroup type="hbox">
<cfinput type="button" width="100" name="cnt_step5" label="next" value="Next" onClick="tabs.selectedIndex=tabs.selectedIndex+1" align="right">
</cfformgroup>
</cfformgroup>
</cfformgroup>
</cfformgroup>
</cfform>
What I want is to be able to click the purchasing address checkbox on step one and then on step 2 have all these fields bound to the step 1 fields.
Any help would be greatly appreciated! :)
Andy H.
Any help would be greatly appreciated.
Thanks,
Andy H.
thomary
I'm using flash forms
I have a problem. I should be using a radio button but because they won't clear onchange of a grid, I decided to use checkboxes.
I have the checkboxes binding to the grid. everything works fine. They bind and clear as they should.
But I need to make sure a user does not select both. Is there any way to do an onclick="#ClearBox1#"
<cfsavecontent variable="clearBox1">
if (thisbox=="yes") {
box1.selectedData = "no";
}
</cfsavecontent>
I have tried a lot of different ways but nothing seems to clear the checkbox onclick. I've tried .checked and functions but nothing worked. I know it can be done. I found this asfusion page which clears all checkboxes. http://www.asfusion.com/blog/entry/checkboxes-in-a-cfgrid
BUT I can't get the right syntax for my needs.
I have two checkboxes. When one is checked, I want the other to clear.
Any help would be appreciated.
Thanks.
Jeff
Here is the code for disabling checkboxes....
<cfinput type="text" name="checkbind" visible="no" width="0">
<cfinput type="checkbox" name="editShow" checked="false" label="Show Edit Window" disabled="{((editContacts.selected == true) || (editpwd.selected == true))}" value="{checkbind.text=='Profile'}"/>
<cfinput type="checkbox" name="editContacts" checked="false" label="Show Contacts Window" disabled="{((editShow.selected == true) || (editpwd.selected == true))}" value="{checkbind.text=='EmContact'}"/>
<cfinput type="checkbox" name="editpwd" checked="false" label="Show Password Window" disabled="{((editContacts.selected == true) || (editShow.selected == true))}" value="{checkbind.text=='Password'}"/>
Depending on what is in the text field the checkboxes should populate accordingly. You can take a look at my thread about this at: http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=22&threadid=1126188
Ryan
I have about 10 checkboxes that I would like to show as checked or unchecked in a form. The cfgrid does not need to show the checkboxes. So I have 3 columns in my cfgrid (firstName,lastName,company) these all bind just fine to cfinput type="text". There are 10 bit/boolean columns in the same database table that I need binded to my form. When I selected a record the forms update fine with the following code.
<cfinput type="text" name="firstname" label="First"
bind="{membersGrid.dataProvider[membersGrid.selectedIndex]['FirstName']}"
onChange="membersGrid.dataProvider.editField(membersGrid.selectedIndex, 'FIRSTNAME', firstname.text);">
But when trying to do something similar for a cfinput type of checkbox I get no where.
Any assistance would be greatly appreciated.
Thanks,
Ryan
Thomary
The checkbox bind goes in the value.
<cfinput type="checkbox" name="fieldname" label="Field Name" value="{gridname.selectedItem.ColumnName=='yes'}">
Check to make sure of capitalization.
Ryan
<cfquery name="qryMembersList" datasource="#request.ds#">
SELECT MemberID,
FirstName, LastName, GardenCenter
FROM *********
ORDER BY Company
</cfquery>
<cfgrid name="membersGrid" format="FLASH" query="qryMembersList">
<cfgridcolumn name="firstName" header="First Name" display="Yes">
<cfgridcolumn name="lastName" header="Last Name" display="Yes">
<!--- note that this does not need to display, just so I can see the value of the current row for true/false while debugging --->
<cfgridcolumn name="gardenCenter" display="Yes">
</cfgrid>
<cfformgroup type="horizontal" label="Name">
<cfinput type="text" name="firstname" label="First"
bind="{membersGrid.dataProvider[membersGrid.selectedIndex]['FirstName']}"
onChange="membersGrid.dataProvider.editField(membersGrid.selectedIndex, 'FIRSTNAME', firstname.text);">
<cfinput type="text" name="lastname" label="Last"
bind="{membersGrid.dataProvider[membersGrid.selectedIndex]['LastName']}"
onChange="membersGrid.dataProvider.editField(membersGrid.selectedIndex, 'LASTNAME', lastname.text);">
</cfformgroup>
<!--- according to input from Thomary this should work --->
<cfinput type="checkbox" name="txtgardenCenter" label="Field Name" value="{membersGrid.selectedItem.GardenCenter=='yes'}">
<cfgridcolumn name="gardenCenter" display="Yes">
Any other thoughts? Thanks again.
Thomary
Also, make sure your of database capitalization. You show both gardenCenter and GardenCenter. Which is it in your database.
HTH
YogeshM
I have a flash form with a repeater object as follows:
<cfformgroup type="repeater" query="qData">
<cfformgroup type="vertical">
<cfformgroup type="horizontal" width="300">
<cfformitem bind="{qData.currentItem.name}" type="text" width="90"></cfformitem>
<cfinput type="checkbox" name="myCheckBox_ch" checked="no" bind="{qData.currentItem.id}">
</cfformgroup>
</cfformgroup>
</cfformgroup>
Then I have a button to submit the form which calls a method called validate()
<cfinput type="button" name="btnSubmit" value="Proceed >>" onClick="validate();">
<cfformitem type="script">
public function validate():Void{
//How can I retrieve the value of the ID that has been checked in this method validate??
}
</cfformitem>
I know I can retrieve which checkbox has been checked using the following:
for(var i:Number; i < myCheckBox_ch.length; i++){
if( myCheckBox_ch.getItemAt(i).selected == true ) {
//HERE I NEED TO OBTAIN THE VALUE OF THE ID THAT CORRESPONDS TO THE CHECKBOX THAT HAS BEEN TICKED
// HOW CAN I RETRIEVE THAT?
// OR IS THERE ANOTHER WAY OF DOING THIS?
}//end if
}//end for
Thanks and regards,
Yogesh Mahadnac
Paul Ihrig
<cfinput type="checkbox" name="ul3R_SS" height="18" />
<cfinput type="checkbox" name="ul4_SS" height="18" />
<cfinput type="checkbox" name="ul3r4x_SS" height="18" />
<cfinput type="checkbox" name="q4_0_SS" height="18" />
<cfinput type="text" name="StainlessSteel_total" width="50" height="18" bind="{ul3R_SS.selected}++{ul4_SS.selected}++{ul3r4x_SS.selected}++{q4_0_SS.selected}++"
/>
oMaT
I'm trying to bind several check boxes to a list of roles that are returned by the query. Each role used to be a specific column returned (Ex: accessToDo = 1, accessCalendar = 1, etc) but now its simply a comma delimited list of roles (Ex: todo,calendar,etc) and I'd like the check boxes to activate if the proper value is found in the list. I saw you performed a toString() above in a bind example so I'm curious if something like this would work (this specifically doesn't):
<cfinput type="checkbox" name="roles0" label="Calendar" value="{userList.selectedItem.roles.listContains()=='calendar'}">
TIA,
oMaT