Get selected value of cfselect

[Guest]

Hi. What I want to do should be simple, but it's killing me! All I want to do is display the selected value of a cfselect on my page. Here's the code:

Select:
<cfselect name="ddlStates" value="fullname" display="fullname" width="200"
style="font-size:11px"
bind="cfc:cfc.nationwideJobs.getStates()"
bindonload="true">
</cfselect>

<cfset var1 = #form.ddlStates.selectedItem.label#>
<cfoutput>#var1#</cfoutput>

This doesn't work. The error I keep getting is:

Error Occurred While Processing Request
Element DDLSTATES.SELECTEDITEM.LABEL is undefined in FORM.

Thanks for the help.

[Newsgroup_User]

Doesn't this work?

<cfset var1 = #form.ddlStates#>

--
Ken Ford
Adobe Community Expert Dreamweaver/ColdFusion
Adobe Certified Expert - Dreamweaver CS3
Adobe Certified Expert - ColdFusion 8
Fordwebs, LLC
http://www.fordwebs.com
http://www.cfnoob.com


"byronfromwes92" <webforumsuser@macromedia.com> wrote in message news:gir20i$bob$1@forums.macromedia.com...
> Hi. What I want to do should be simple, but it's killing me! All I want to do
> is display the selected value of a cfselect on my page. Here's the code:
>
> Select:
> <cfselect name="ddlStates" value="fullname" display="fullname"
> width="200"
> style="font-size:11px"
> bind="cfc:cfc.nationwideJobs.getStates()"
> bindonload="true">
> </cfselect>
>
> <cfset var1 = #form.ddlStates.selectedItem.label#>
> <cfoutput>#var1#</cfoutput>
>
> This doesn't work. The error I keep getting is:
>
> Error Occurred While Processing Request
> Element DDLSTATES.SELECTEDITEM.LABEL is undefined in FORM.
>
> Thanks for the help.
>
>
>
>

[Guest]

When I attempt to use <cfset var1 = #form.ddlStates#>, the error I get is: Element DDLSTATES is undefined in FORM.

[Newsgroup_User]

byronfromwes92 wrote:
> This doesn't work. The error I keep getting is:
>

That's right it does not work. ColdFusion runs on the server and
JavaScript runs on the client and never shall the two meet.

The problem is that when CFML is running and trying to set var1 to
'from.ddlStates.selectedItem.label' nothing has been delivered to the
client and nobody has selected anything in the control yet.

By the time anything is delivered to the client for them to select
stuff, ColdFusion is completely done with the request and moved on to
somebody else's.

Any other words, that is a long way to say that you need to use
JavaScript to access the user interaction with the Select control once
it has been delivered to the client.

[Guest]

Thanks for the response. Will you please show a sample of how to do what you suggest?

[Newsgroup_User]

byronfromwes92 wrote:
> Thanks for the response. Will you please show a sample of how to do what you suggest?

It is just standard JavaScript of which there are millions of examples,
tutorials and books available.

<script type="text/javascript">
function selectOption()
{
alert (document.getElementById("ddlStates").selectedItem.label);
}

window.onload = function()
{
document.getElementById("ddlStates").onchange = selectOption;
}
</script>

[Dan_Bracuk]

You appear to be attempting to display a form variable before submitting the form. Is that what you think you are trying to do?

[Guest]

*Ideally*, what I'd like to do is change the contents of a cfgrid based on the selected value of a cfselect. I have a cfc that populates the cfselect with US States. The cfgrid should show values based on what is selected in the cfgrid.

For now, I'll accept getting the value out of the cfselect. Do I have to submit the form to get the cfselect's selected value? The cfselect is already rendered/populated by the time I see it in the browser, so what am I missing?

[Dan_Bracuk]

The grid thing might entail a form submission. In the meantime, here is some sample code that changes the contents of a div based on the choice of a select. It might give you some hints.

<cfsavecontent variable="PickUnits">
bunch of cf & html code goes here.
</cfsavecontent>


<cfsavecontent variable="PickServices">
bunch of cf & html code goes here.
</cfsavecontent>


<script>
function toggle (choice) {
<cfoutput>
var #toScript(PickUnits, "UnitsPicked")#;
var #toScript(PickServices, "ServicesPicked")#;
</cfoutput>

if (choice == "service")
document.getElementById('UnitsOrServices').innerHTML = ServicesPicked;

else
document.getElementById('UnitsOrServices').innerHTML = UnitsPicked;

return true;
} // end of function

</script>

<select name="ReportBy" onchange="toggle(this.value);">
<option value="unit">Unit</option>
<option value="service">Service</option>
</select>


<cfoutput>
<div id="UnitsOrServices">
#PickUnits#
</div>
</cfoutput>

[Guest]

Dan,

Thanks for the sample. This is a good start. I will try to get this working for my needs.

Cheers,

b

[The_ScareCrow]

What you really want to do is bind the cfselect to the cfgrid.
I assume your using cf8

Then here is an example of this
http://www.garyrgilbert.com/blog/index.cfm/2007/11/20/Filtering-CFGrid-with-CFSelect

Ken

[Guest]

I'm using CF MX7. I wish I could use the example you suggested. Thanks for the reply.

[Guest]

I've decided to go about this in a different way. I would like to pass the cfselect's selected value to an action form that will display my filtered results. Here's the cfm for the base page:

<cfform action="viewFilteredJobs.cfm" method="post">
<select name="ddlStates">
<option value="Alabama" label="Alabama">
<option value="Alaska" label="Alaska">
<option value="Arizona" label="Arizona">
<option value="Colorado" label="Colorado">
<option value="Maryland" label="Maryland">
</select>
</p>
<input type="submit" name="Submit" value="Submit" />
</cfform>

Here's the cfm for the action page:

<cfform format="html" method="post" action="viewFilteredJobs.cfm">
<table border="0" align="center">
<tr><td><a href="viewNationWideJobs.cfm" style="font-size:11px;font-family:Arial">Go Back</a></td></tr>
<tr>
<td colspan="3">
<cfgrid name="grdJobsByState" selectmode="row" griddataalign="center" pagesize="30" format="html"
bind="cfc:cfc.jobsByState.getJobsByState({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})">
<cfgridcolumn name="jobtitle" header="Job Title" headeralign="center" width="500" dataalign="left">
<cfgridcolumn name="certified" header="Cert/Lic Req?" headeralign="center" width="100" dataalign="center">
<cfgridcolumn name="searchstate" header="State" headeralign="center" width="50" dataalign="center">
<cfgridcolumn name="date" header="Date" headeralign="center" width="150" dataalign="center">
</cfgrid>
</td>
</tr>
<tr><td><cfinput type="hidden" name="selectedState" value="#form.ddlStates#">
</table>
</cfform>

Finally, here's the cfc:

<cfcomponent>
<cffunction name="getJobsByState" access="remote">
<cfargument name="page" required="no" default="1">
<cfargument name="pageSize" required="yes" default="20">
<cfargument name="gridsortcolumn" required="yes" default="date">
<cfargument name="gridsortdirection" required="yes" default="desc">

<cfif arguments.gridsortcolumn eq "">
<cfset arguments.gridsortcolumn = "date" />
<cfset arguments.gridsortdirection = "desc" />
</cfif>

<cfquery name="qryGetJobsByState" datasource="ttcmdev_local">
EXEC sp_GetJobsByState
@state='#form.ddlStates#'
</cfquery>
<!---<cfreturn qryGetJobsByState>--->
<cfreturn queryconvertforgrid(qryGetJobsByState, page, pagesize)>
</cffunction>
</cfcomponent>

No matter what I do, I keep getting this error:

Element DDLSTATES is undefined in FORM.
The error occurred in C:\Inetpub\wwwroot\Demo\cfc\jobsByState.cfc: line 15

13 : <cfquery name="qryGetJobsByState" datasource="ttcmdev_local">
14 : EXEC sp_GetJobsByState
15 : @state='#form.ddlStates#'
16 : </cfquery>
17 : <!---<cfreturn qryGetJobsByState>--->

What am I missing? Thanks for the help!

[Dan_Bracuk]

Your cfc knows nothing about forms. All it knows about are the arguments you pass to it.

[Guest]

Dan,

Thanks for your replies. So, what I need to do is pass the selected value from the cfselect as an argument to the cfc? Is there anything special to passing the argument to the cfc from the cfselect? Do I need to use hidden fields to hold the variable or anything like that?

Cheers,

Byron

[Guest]

I am so close! I figured out how to pass the selected value from the cfselect to the cfc, but now I cannot seem to make the query run with the passed value. Here's the cfm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>View Jobs Filtered By State</title>
</head>
<body>

<cfif isdefined ("form.ddlStates")>
<cfset form.selectedState="#form.ddlStates#">
<cfelse>
<cfset selectedState="">
</cfif>

<cfinvoke
component="cfc.jobsByState"
method="getJobsByState"
returnvariable="qryGetJobsByState">
<cfinvokeargument name="selectedStateToPass" value=#selectedState#>
</cfinvoke>

<cfform format="html" method="post" action="viewFilteredJobs.cfm">
<table border="0" align="center">
<tr><td><a href="viewFilteredJobs.cfm" style="font-size:11px;font-family:Arial">Go Back</a></td></tr>
<tr><td>
<cfselect name="ddlStates">
<option value="Alabama" label="Alabama">
<option value="Alaska" label="Alaska">
<option value="Arizona" label="Arizona">
<option value="Colorado" label="Colorado">
<option value="Maryland" label="Maryland">
</cfselect>
<cfinput type="submit" name="Submit" value="Submit" style="font-size:11px;font-family:Arial">
<cfoutput>#selectedState#</cfoutput>
</td>
</tr>
<tr>
<td colspan="3">
<cfgrid name="grdJobsByState" selectmode="row" griddataalign="center" pagesize="30" format="html"
bind="cfc:cfc.jobsByState.getJobsByState({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})">
<cfgridcolumn name="jobtitle" header="Job Title" headeralign="center" width="500" dataalign="left">
<cfgridcolumn name="certified" header="Cert/Lic Req?" headeralign="center" width="100" dataalign="center">
<cfgridcolumn name="searchstate" header="State" headeralign="center" width="50" dataalign="center">
<cfgridcolumn name="date" header="Date" headeralign="center" width="150" dataalign="center">
</cfgrid>
</td>
</tr>
</table>
</cfform>
</body>
</html>

And here's the cfc:

<cfcomponent>
<cffunction name="getJobsByState" access="remote">
<cfargument name="page" required="yes" default="1">
<cfargument name="pageSize" required="yes" default="20">
<cfargument name="gridsortcolumn" required="yes" default="date">
<cfargument name="gridsortdirection" required="yes" default="desc">
<cfargument name="selectedStateToPass" required="yes" default="">

<cfif arguments.gridsortcolumn eq "">
<cfset arguments.gridsortcolumn="date" />
<cfset arguments.gridsortdirection="desc" />
<cfset arguments.selectedStateToPass='#selectedStateToPass#' />
</cfif>

<cfquery name="qryGetJobsByState" datasource="ttcmdev_local">
EXEC sp_GetJobsByState
@state='#selectedStateToPass#'
</cfquery>
<cfreturn queryconvertforgrid(qryGetJobsByState, page, pagesize)>
</cffunction>
</cfcomponent>

I know that my cfselect value is getting passed because in debug mode, I can select a state from the cfselect. submit the form, and see the variable passed to the stored procedure in the SQL Queries section of the debug info:

qryGetJobsByState (Datasource=ttcmdev_local, Time=15ms, Records=68) in C:\Inetpub\wwwroot\Demo\cfc\jobsByState.cfc @ 11:44:42.042

EXEC sp_GetJobsByState
@state='Colorado'

Please help me! I'm almost there!

[Dan_Bracuk]

If it's not working, what is actually happening?

[Guest]

The page loads, but my cfgrid is empty. No matter which state I pick, I do not get results returned to the cfgrid. I am cfoutput'ing the selected value next to the submit button to be sure that I can select it. Also, as I stated earlier, the state I pick is passed to the EXEC statement in the SQL query, but the grid isn't updated. I can see, however that the number of records returned:

qryGetJobsByState (Datasource=ttcmdev_local, Time=32ms, Records=223) in C:\Inetpub\wwwroot\Demo\cfc\jobsByState.cfc @ 12:42:40.040

EXEC sp_GetJobsByState
@state='Maryland'

Any ideas? Is there something wrong with my code?