CFForm Tips (2)

coldfusion (This post is more than 2 years old.)

You can't bind with cfselect tags. However, you can use onChange and ActionScript to do it quite easily:

<cfselect name="state" required="true"
label="State"
message="Please select your state."
onChange="state_bi.selectedIndex=state.selectedIndex">

Hire Me!

I'm currently looking for my next role in developer evangelism and advocacy. I have a long history of helping companies work with developers and love to write, create demos, and present at conferences. You can find my resume to learn more and drop me an email (raymondcamden@gmail.com) to reach out.

Support this Content!

If you like this content, please consider supporting me. You can become a Patron, visit my Amazon wishlist, or buy me a coffee! Any support helps!

Want to get a copy of every new post? Use the form below to sign up for my newsletter.

Archived Comments

Comment 1 by Karolis R. posted on 2/13/2005 at 1:39 AM

There is one problem with this code! What if related values have two differen selectedIndex values? What I am trying to say this code does not bind database data directly!

Comment 2 by Raymond Camden posted on 2/13/2005 at 8:06 AM

My example was assuming both selects had the same data. Obviously you would modify for other situations - but the point is - that is the base code you can use to work with.

Comment 3 by Karolis R. posted on 2/13/2005 at 9:38 PM

The only problem is, I nor many people I've talked to know a way that actionscript could be used to select by OPTION's VALUE="".

If I was to populate the CFSELECT from a query, say there is thirty people in the list. The list is continually updated, people get added and deleted. ID associated with people names will NOT match INDEX value which always goes from 0 to RECORDCOUNT - 1. So if my grid would say USERID = 209, this code would look for selectedIndex value!!! But there is only 30 people in the list, so...

I think people at Macromedia released CF7 as a nice BETA version, since so many obvious functionalities, implied by their own design, are missing.

IF SOMEONE CAN FIGURE IT OUT, PLEASE POST IT, IT WOULD BE GREATLY APPRECEATED!!!

Comment 4 by Raymond Camden posted on 2/14/2005 at 3:48 AM

Are you asking if is possible to get the VALUE attribute? If so - there is. You can get both the value and text of a particular OPTION item. So in your drop down, if VALUE was the primary key of the user and the TEXT was the username, you can access the value like so:

this.options[selectedIndex].value

This is inside an onChange for the select so obviously THIS refers to the select box itself.

Comment 5 by Karolis R. posted on 2/14/2005 at 4:05 AM

What I am trying to do is to make changing CFGRID data change SELECTED VALUE in &lt;SELECT&gt;.

"this.options[selectedIndex].value" gives you selected value of &lt;SELECT&gt; instance, you cannot use it to change selection!!!

Comment 6 by Raymond Camden posted on 2/14/2005 at 4:11 AM

Eh? To change the selected index of a select box, let's say named ccyear, you can simply do this:

ccyear.selectedIndex=4;

Obviously real code will be a bit more complex, but the important part is on the left side of the equation above.

Comment 7 by Karolis R. posted on 2/14/2005 at 4:14 AM

What I meant was... How to change the selected value by NOT KNOWING selectedINDEX, only the actual value of the record.

read my 10:38AM post.

Comment 8 by Raymond Camden posted on 2/14/2005 at 5:14 AM

Oh - well use the code I described above to loop over all the items. Ie, loop from i=0 to the number of items in the drop down and check the foo.options[i].value property.

Comment 9 by Bill King posted on 3/11/2005 at 1:10 AM

I am havnig trouble executing the loop statement. Here is what I have:

I am using an invisible field to work between my select box and my grid. Then when the gridrow is selected my hidden field value is updated. That works with bind.

Then when I change selections from my select box the onClick changes the hidden field therefore updating the grid.

Problem is when I select a grid item I cannot match the id in my hidden textbox to the VALUE. I tried adding this to the onChange of the text box:

for (i=0; i&lt;clientListSelect.length; i++)
{if (Client_id.text == clientListSelect.getItemAt[i].data) clientListSelect.selectedIndex = i}

Can't get any response from the browser. Thoughts?

Comment 10 by Bill King posted on 3/11/2005 at 2:39 AM

I am havnig trouble executing the loop statement. Here is what I have:

I am using an invisible field to work between my select box and my grid. Then when the gridrow is selected my hidden field value is updated. That works with bind.

Then when I change selections from my select box the onClick changes the hidden field therefore updating the grid.

Problem is when I select a grid item I cannot match the id in my hidden textbox to the VALUE. I tried adding this to the onChange of the text box:

for (i=0; i&lt;clientListSelect.length; i++)
{if (Client_id.text == clientListSelect.getItemAt[i].data) clientListSelect.selectedIndex = i}

Can't get any response from the browser. Thoughts?

Comment 11 by Jeff Bouley posted on 9/23/2005 at 2:27 AM

Ray,

I'm getting errors with your recommendation of "this.options[selectedIndex].value" in onChange, error states no property with the name 'options'. I too would like to retrieve value and text from a select box that has size. Data is great, fo r retrieving value and not text, but text seems to only work with selectedItem when there is no size to the select. Any info. appreciated.

Comment 12 by Jeff Bouley posted on 9/23/2005 at 2:45 PM

Got it... To access data in a flash cfselect, to get id information you'd use mySelect.selectedItem.data, but to get the display value you'd use mySelect.selectedItem.label.

Comment 13 by Raymond Camden posted on 9/23/2005 at 3:44 PM

So you are all good Jeff?

Comment 14 by Thomary posted on 12/13/2005 at 12:06 AM

I've got two cfselects and this actionscript is on the onChange of the grid that works for me.

<cfgrid name="gridname" query="getArtists" height="155" width="755" rowheaders="false"
onchange="for(var i:Number = 0; i<cfselect.length; i++) {if(cfselect.getItemAt([i]).data==gridname.selectedItem.columnname)cfselect.selectedIndex=i}
for(var i:Number = 0; i<cfselect2.length; i++) {if(cfselect2.getItemAt([i]).data==gridname.selectedItem.columnname2)cfselect2.selectedIndex=i}">

My problem: These cfselect fields are not required. So in the database sometimes there is data and sometimes it's null.
When the grid selection is made - and there is data the cfselects are filled in. Great!.
But the next grid selection - there is no data the cfselects keep the last data (until another grid change with data)

I need to clear the cfselects at the begining of the actionscript and then pick up the grid selection. Any help would be great!!!

Comment 15 by corey posted on 1/24/2006 at 3:20 AM

Thomary

not sure if your question was answered yet, but you can reset the select value everytime during the onChange so the previous value is not there when an empty value is selected. Just set the index value to 0 (assuming you have an option like "Select" with an empty value) in the begining of your onChange statment:

old way:
onchange="for(var i:Number = 0; i<cfselect.length; i++) {if(cfselect.getItemAt([i]).data==gridname.selectedItem.columnname)cfselect.selectedIndex=i}
for(var i:Number = 0; i<cfselect2.length; i++) {if(cfselect2.getItemAt([i]).data==gridname.selectedItem.columnname2)cfselect2.selectedIndex=i}">

new way:
onchange="{cfselect.selectedIndex=0}{cfselect2.selectedIndex=0}for(var i:Number = 0; i<cfselect.length; i++) {if(cfselect.getItemAt([i]).data==gridname.selectedItem.columnname)cfselect.selectedIndex=i}
for(var i:Number = 0; i<cfselect2.length; i++) {if(cfselect2.getItemAt([i]).data==gridname.selectedItem.columnname2)cfselect2.selectedIndex=i}">

Comment 16 by Thomary posted on 1/27/2006 at 2:20 AM

Absolutely fantastic. You saved me again.
Entering data in every record was my work around (lucky I was only using sample data until I finish the form). Thanks very much!!

Comment 17 by thomary posted on 9/1/2006 at 6:13 PM

I'm trying to use a cfSelect to fill other cfinput fields. Inventory is too large to fill a grid. It takes too long to open the form.
So when someone selects Inventory tag number = 123456
I can then set the type, model, location from my inventory database.
I tried the code below but I keep getting undefined in the cfinput fields on select.

Cfquery datasource=”tableinv” name=”myinv”
SELECT tagnum, type, model, location
FROM myinvtable
/cfquery

cfsavecontent variable="autofillinv"
type.text = myselect.selectedItem.type;
selecttype.text = myselect.selectedItem.model;
selectitem.text = myselect.selectedItem.location;
/cfsavecontent

Cfform….
cfSelect query="myinv" name=”myselect” label="Inv Tag Num" onchange=”#autofillinv#” value="tagnum" display="tagno" queryPosition="below" width="185"
option value="" /option
/cfSelect
cfinput type="text" name="type" label="Type" size="12" /
cfinput type="text" name="model" label="Model"size="25"/
cfinput type="text" name="location" label="Location" size="40" /

/cfform

Is something like this possible?
Is there something else I should look into?
I’d appreciate any direction.

Comment 18 by Raymond Camden posted on 9/1/2006 at 6:46 PM

You set selecttype and selectitem - but I don't see them. I see type, model, and location.

Comment 19 by thomary posted on 9/6/2006 at 5:42 PM

I'm sorry, I was using the code from another area that works and just changed it to the new code I'm trying to get working. The code that works are all cfselects.
The code doesn't work for cfinputs.

Cfquery datasource=”tableinv” name=”myinv”
SELECT tagnum, type, model, location
FROM myinvtable
/cfquery

cfsavecontent variable="autofillinv"
type.text = myselect.selectedItem.type;
model.text = myselect.selectedItem.model;
location.text = myselect.selectedItem.location;
/cfsavecontent

Cfform….
cfSelect query="myinv" name=”myselect” label="Inv Tag Num" onchange=”#autofillinv#” value="tagnum" display="tagno" queryPosition="below" width="185"
option value="" /option
/cfSelect

cfinput type="text" name="type" label="Type" size="12" /
cfinput type="text" name="model" label="Model"size="25"/
cfinput type="text" name="location" label="Location" size="40" /

/cfform

Can this be used on cfinputs?

Comment 20 by Rio posted on 10/10/2006 at 4:42 AM

Hi Ray and all,
I´m trying to put a simple cfselect into a cfform but getting confused. I´m very new to actionscript and cf.
My cfinputs work fine outputting in the cfgrid:

<cfinput type="DateField" name="DTLEAVE" label="ACTION DATE:"
bind="{companyGrid.dataProvider[companyGrid.selectedIndex]['DTLEAVE']}" onChange="companyGrid.dataProvider.editField(companyGrid.selectedIndex, 'DTLEAVE', DTLEAVE.text);">

The problem is here when I have tried to incorporate the comments in this thread and it doesn´t throw an error but doesn´t output the db entries as the cfinputs do. I am a bit out of my depth-please help!! Thanks:

<cfselect name="NEXTSTEP" label="Next"
onChange="NEXTSTEP.selectedIndex=NEXTSTEP.selectedIndex">
<option value="SEND FAX">SEND FAX</OPTION>
<option value="SEND EMAIL">SEND EMAIL</OPTION>
<option value="CALL AND EMAIL">CALL AND EMAIL</OPTION>
<option value="CALL">CALL</OPTION>
<option value="NO">NO</OPTION>
<option value="MEETING">MEETING</OPTION>
</cfselect>

Comment 21 by aubry posted on 11/9/2006 at 9:47 PM

hello
I'm trying to change the value of a cfselect when I click on my cfgrid

my cfselect options are from a query

Thanks for your help

Comment 22 by ed posted on 11/10/2006 at 10:20 PM

Have a look at this this is for more than one select binding. Works the same as for one.

To have more than one select binding to a cfgrid just add actionscript to the cfgrid. By trial and error I worked out that you do the following:
On the cfgrid(this uses three cfselects):
<cfgrid name="UsersGrid" format="Flash"
query="qNames" rowheaders="No"
onchange="for (var i:Number = 0; i<state.length; i++) {if
(state.getItemAt([i]).data == UsersGrid.selectedItem.state)
state.selectedIndex = i} for (var i:Number = 0; i<meetingtime.length; i++)
{if (meetingtime.getItemAt([i]).data == UsersGrid.selectedItem.meetingtime)
meetingtime.selectedIndex = i}
for (var i:Number = 0; i<dept.length; i++) {if (dept.getItemAt([i]).data ==
UsersGrid.selectedItem.dept) dept.selectedIndex = i}
for (var i:Number = 0; i<city.length; i++) {if (city.getItemAt([i]).data ==
UsersGrid.selectedItem.city) city.selectedIndex = i}">

On the cfselect:
<cfselect name="dept" width="200" size="1" label="Dept."
onchange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'dept',
dept.selectedItem.data);">
<option value="None">None</OPTION>
<option value="Cundinamarca">Cundinamarca</OPTION>
<option value="Antioquia">Antioquia</OPTION>
<option value="Boyaca">Boyaca</OPTION>
<option value="Sucre">Sucre</OPTION>
<option value="Atlantico">Atlantico</OPTION>
</cfselect>

Explanation:
To add a new cfselect just add in the onchange between the "" the
following:

for (var i:Number = 0; i<state.length; i++) {if (state.getItemAt([i]).data
== UsersGrid.selectedItem.state) state.selectedIndex = i}

change the field in this example "state" to your field name.

Watch out for upper and lower case-actionscript is case sensitive although
cf isn´t. Try to have your field names all uppercase and put all of the references in upper case as well then you won´t get problems. good luck.

Comment 23 by aubry posted on 11/11/2006 at 1:16 AM

Thanks a lot it works for me now but I've a second problem
-> http://www.asfusion.com/blo...

post n° 127 ;-)

Have a nice week !
&thanks again !

Comment 24 by Ed posted on 11/14/2006 at 9:55 PM

Instead of using an input meaning that users can change things how can I just output the value in a cfform? I imagine I am trying to do something that cfform flash format can´t do. What I want to do is output the value below and keep it binding to the grid. Any ideas or impossible? Thanks a lot

<cfinput type="DateField" name="DTLEAVE" label="ACTION DATE:"
bind="{companyGrid.dataProvider[companyGrid.selectedIndex]['DTLEAVE']}" onChange="companyGrid.dataProvider.editField(companyGrid.selectedIndex, 'DTLEAVE', DTLEAVE.text);">

Comment 25 by sharon212 posted on 12/1/2006 at 12:53 AM

Hi,

How can I bind values from select box to display those into text box? Please help me out..

Here is my code:

<cfform name="form" METHOD="POST" action="Faccdte.cfm" skin ="#skin#" format="flash" width="900" height="300">

<cfformgroup type="horizontal" >
<cfselect name = "thisselect"
label = "AccNo"
required="yes"
width="170">
<cfloop query="getAccNo">
<option value = #getaccno.prdtyd#, #getaccno.accno#, #getaccno.acccud#, #getaccno.bookbal#,#getaccno.vdbbal# > #getaccno.ACCNO# </option>
</cfloop>
</cfselect>
</cfformgroup>

<cfinput type="text" name="prdtyd" width="200" label="Account Type" bind="{select.selectedItem.data}">
<cfinput type="text" name="Accno" width="200"...>
<cfinput type="text" name="Acccud" width="200"...>
<cfinput type="text" name="bookbal" width="200"...>
<cfinput type="text" name="vdbbal" width="200"...>

</cfform>
</cfoutput>

Comment 26 by Howrad posted on 12/19/2007 at 3:17 AM

Do you know if you still can not bind to cfselect in CF8?

Comment 27 by Thomary posted on 12/26/2007 at 7:47 PM

I think if you use the name of the cfselect
{thisselect.selectedItem.data}

Comment 28 by Simon posted on 2/26/2008 at 7:00 PM

Hi, I am using

<cfselect name="status" size="1" id="status" label="Status" multiple="No" width="160" required="Yes" message="Please select the status" bind="{data.dataProvider[data.selectedIndex]['status']}" onChange="data.dataProvider.editField(data.selectedIndex, 'status', status.text)">
<option value = "">Select Status</option>
<option value = "Pending">Pending</option>
<option value = "Won">Won</option>
<option value = "Lost">Lost</option>
<option value = "Requoted">Requoted</option>
</cfselect>

whidch is the same technique I am using to bind my text fields to my cfgrid. However, when I select a row on the grid the cfselect does not show the value. The grid will change if I choose an option from the cfselect, but the cfselect just does not show the relevant value when i click on a row....any thoughts please?

Comment 29 by thomary posted on 2/26/2008 at 7:08 PM

cfselects are different.

You must update the select field on the onChange of the Grid.

First set the select to null with:
{status.selectedIndex=0}

Then set the select with your data
for(var i:Number = 0; i<status.length; i++)
{if(status.getItemAt([i]).data==data.selectedItem.status)status.selectedIndex=i}

Comment 30 by Simon posted on 2/26/2008 at 7:11 PM

Thanks for the prompt reply,

so the two lines of code you specified, where do they reside in my code? sorry, just trying to get to grips with grids, and its my first time binding!

thanks again

Comment 31 by thomary posted on 2/26/2008 at 7:17 PM

<cfgrid name="data" onChange="{status.selectedIndex=0}
for(var i:Number = 0; i<status.length; i++)
{if(status.getItemAt([i]).data==data.selectedItem.status)status.selectedIndex=i}"

I got this off Ben Forta's blog a while back. It's great help for all of us.

Comment 32 by Simon posted on 2/26/2008 at 7:24 PM

Thanks again, but it hasn't changed anything...?

so my grid code:

<cfgrid name="data" height="300" query="agent" format="flash" onChange="{status.selectedIndex=0}
for(var i:Number = 0; i<status.length; i++)
{if(status.getItemAt([i]).data==data.selectedItem.status)status.selectedIndex=i}" >

my cfselect code:

<cfselect name="status" size="1" id="status" label="Status" multiple="No" width="160" onChange="data.dataProvider.editField(data.selectedIndex, 'status', status.text)">
<option value = "">Select Status</option>
<option value = "Pending">Pending</option>
<option value = "Won">Won</option>
<option value = "Lost">Lost</option>
<option value = "Requoted">Requoted</option>
</cfselect>

So at the moment, if I change the cfselect the relevant column in the grid changes. But, when I first click on the grid row, my text fields populate with the data, but the cfselect field just stays as "Select Status"

Sorry...

Comment 33 by Simon posted on 2/27/2008 at 4:45 PM

sorry, Am I not making any sense?