CFselect onchange

[ZNB]

Hello,

I want to get the value of cfselect option whitout click submit. I see, we can use the OnChange Method but i can't recover the javascript value in Coldfusion.

Can you help me ? Thanks in advance.

[ZNB]

Help

[Charlie Arehart]

Cfselect simply creates a traditional select tag and its option tags. As such, you can obtain the value selected (without submit) using Javascript, and in a way that has nothing to do with coldfusion.

I don't write js enough to readily offer specific code for you, but assuming no one else does, I'm pointing you in the direction you need to look (outside of coldfusion).

If instead you feel this IS still somehow a cf question, please elaborate. 

[ZNB]

Thank you for your quick reply. I am looking for a solution to retrieve this value. If I don't use javascript, I don't mind. Isn't there a solution built into Coldfusion to define a variable with an OnChange in a Select?

In advance, thank you for your answer.

[Charlie Arehart]

There is not. Again, cfselect builds html (select and option tags). It does not add javascript, it does not execute javascript. By default, it will only send the result back to CF when the form is submitted.

But again YOU can add javascript to detect things in the client. The most that cfselect offers is that onchange attribute that you have mentioned. That is simply a placeholder for you to provide javascript. You have to write it. (I appreciate that you may not write js. You just need to look into it or find someone who will offer it.)

This is just one of those things where the server-side CFML does not provide the kind of client-side power you want. You get that from js itself, or from js libraries that add such power, like jquery. BTW, CF provides jquery built-in, so you may be able to leverage that without even adding such a library...or you can add one, and your client-side request and js you write will be able leverage that. Hope that gets you closer to a solution.

[BKBK]

 Isn't there a solution built into Coldfusion to define a variable with an OnChange in a Select?

By @ZNB

There is. However you have to use the bind attribute. The onChange event will then happen implicitly.

It involves too many parts, making it difficult to explain. So I shall give you a fully worked out example instead. 

The CFC makes use of the cfdocexamples datasource, which is built-in in ColdFusion. Place the CFC and CFM in the same directory, and launch the CFM page in the browser.

<!--- selectEmployee.cfm --->
<!--- The location is expected to come in as a URL parameter. The bind requires it when the page loads, so a default location, San Francisco, is set. --->
<cfparam name="url.location" default="San Francisco">

<cfform name="empForm">
	
<cfinput name="loc" type="hidden" value="#url.location#" >

Department: <cfselect  name="dept" bind="cfc:Employee.getDepartments({loc})" bindonload="true"></cfselect>
<br>

Employee: <cfselect  name="emp_id" bind="cfc:Employee.getEmployees({dept})" ></cfselect>
<br><br>

<cfinput name="sbmt" type="submit" value="Submit">

</cfform>

<div>
	Form:
	<cfdump var="#form#">
</div>

<--- Employee.cfc --->

<cfcomponent>
<cffunction name="getDepartments" access="remote" output="false" returntype="array">
	<cfargument name="location" type="string" required="true"> 
	
	<cfset var departments = queryNew("","")>
	<cfset var arr = arrayNew(2)>
	
	<cfquery name = "departments" dataSource = "cfdocexamples">
	    SELECT department
	    FROM employees
	    WHERE location = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.location#">
	</cfquery>
	
	<cfset arr[1][1]="">
	<cfset arr[1][2]="Select department">
	
	<cfloop query="departments">
	<cfset arr[currentrow+1][1]=department>
	<cfset arr[currentrow+1][2]=department>
	</cfloop>
	
	<!--- Alternative, if you require no "Select department" option --->
	<!--- <cfloop query="departments">
	<cfset arr[currentrow][1]=department><!---option values in the select list--->
	<cfset arr[currentrow][2]=department><!---displayed values in the select list --->
	</cfloop> --->
	
	<cfreturn arr> 

</cffunction>

<cffunction name="getEmployees" access="remote" output="false" returntype="any">
	<cfargument name="dept" type="string" required="true">
	
	<cfset var employees = queryNew("","")>
	<cfset var arr = arrayNew(2)>
	
	<cfquery name = "employees" dataSource = "cfdocexamples">
	    SELECT Emp_ID,  FirstName || ' ' || LastName as Name
	    FROM Employees 
	    WHERE department = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.dept#">
	</cfquery>
	
	<cfset arr[1][1]="">
	<cfset arr[1][2]="Select employee">
	<cfloop query="employees">
	<cfset arr[currentrow+1][1]=emp_id>
	<cfset arr[currentrow+1][2]=name>
	</cfloop>
	
	<!--- Alternative, if you require no "Select employee" option --->
	<!--- <cfloop query="employees">
	<cfset arr[currentrow][1]=emp_id><!---option values in the select list--->
	<cfset arr[currentrow][2]=name><!---displayed values in the select list --->
	</cfloop> --->
	
	<cfreturn arr> 
	
</cffunction>
</cfcomponent>