ColdFusion Bind Example

Hi Erik--
I can see that this is your first question--Welcome to Experts-Exchange!

Quick clarify-er: When you say you are trying  '...pulling down an option in a form without a submit button'

...Do you mean that you are trying to show that query data without a page refresh?

Any extra details and/or additional topics you can add will be helpful-THANKS!
Mike

I think it's called BIND

I have a web page that pulls from a unique ID in the URL (example www.website.com/index.cfm?Product_ID=XXXXXX)
I have a form on that page with just one SELECT drop down with 5 options (example Stage1, Stage2, Stage3,etc...)
Rather than having to hit the submit button every time I want to place Product XXXXXX into a different stage. I wanted it to automatically update the database with the option selected on the form without hitting the submit button.

Personally, I'd use jQuery instead of a CF 'bind'.  A CF bind does work for simple cases, but it's just as easy to a lib like jQuery. The advantage being you're not dependent CF's black box implementation. Sadly Adobe routinely breaks a lot of UI code customizations when they update the underlying JS libraries in CF.  (Do a search on CFGrid problems after updating to 2016/218). Not to mention the CF UI stuff is notoriously buggy.

Anyway, I'd suggest creating a CFC containing a remote function that updates your product table.  Then use jQuery to trigger an ajax call whenever the list selection changes.  

Form/Javascript

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
	$("#productId").on("change", function(){
		// get selected id
		var productId = $(this).val();
		// submit the id to component via ajax 
        $.ajax({
			url: 'YourComponentName.cfc?returnFormat=json'
				, dataType: 'json'
                , data: { method: 'updateProduct', productId: productId}
		}).done(function(data) {
			// for demo, just log result 
			console.log( data );
		});
	});
});
</script>
 
<form>
	Option
	<select id="productId" name="productId">
		<option value="1">Product 1</option>
		<option value="2">Product 2</option>
		<option value="3">Product 3</option>
		<option value="4">Product 4</option>
	</select>
</form>

Select allOpen in new window

YourComponentName.cfc

<cfcomponent>
	<cfset variables.dsn = "Your_Datasource_Name">
	
	<cffunction name="updateProduct" returnType="struct" access="remote">
		<cfargument name="productID" type="numeric">
 		<cfset local.result["success"] = true>
		
		<cftry>
			<cfquery datasource="#variables.dsn#">
				UPDATE  TABLE_NAME
				SET          SomeColumn  = 'some value'
   				WHERE   productID = <cfqueryparam value="#arguments.productId#"
									cfsqltype="cf_sql_integer">
			</cfquery>
				<!--- do error handling if needed --->
			<cfcatch>
				<cfset local.result["success"] = false>
			</cfcatch>
		</cftry>

		<cfreturn local.result>
	</cffunction>
	
</cfcomponent>

Select allOpen in new window