Associating Submit Buttons With Any Form Using Button Attributes In Native HTML

index.cfm

<cfscript>

	param name="form.name" type="string" default="Tricia";
	param name="form.action" type="string" default="";

</cfscript>
<cfoutput>

	<!-- BEGIN: Form. -->
	<form id="myForm" method="post" action="#cgi.script_name#">
		<input
			type="text"
			name="name"
			value="#encodeForHtmlAttribute( form.name )#"
		/>
		<button type="submit" name="action" value="greet">
			Greet
		</button>
	</form>
	<!-- END: Form. -->

	<hr />

	<p>
		These buttons are <strong>outside the form</strong> container. However, they are
		using the <code>form</code> attribute to associate with an existing form on the
		page.
	</p>
	<p>
		<button type="submit" form="myForm" name="action" value="insult">
			Insult
		</button>
		<button type="submit" form="myForm" name="action" value="flatter">
			Flatter
		</button>
	</p>

	<!--- Output message if we have all the submitted form data. --->
	<cfif ( form.name.len() && form.action.len() )>
		<hr />
		<p>
			<strong>[action: #encodeForHtml( form.action )#]</strong>
			<cfswitch expression="#form.action#">
				<cfcase value="greet">
					Good morning, #encodeForHtml( form.name )#, I hope all is well.
				</cfcase>
				<cfcase value="insult">
					Hey #encodeForHtml( form.name )#, you are a poo-face!
				</cfcase>
				<cfcase value="flatter">
					Wow #encodeForHtml( form.name )#, you look amazing!
				</cfcase>
			</cfswitch>
		</p>
	</cfif>

</cfoutput>

snippet-1.cfm

<form id="myForm">
	...
</form>
<button type="submit" form="myForm">
	Submit Form
</button>