Overriding Form Submission Properties Using Button Attributes In Native HTML

index-1.cfm

<cfscript>

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

</cfscript>
<cfoutput>

	<!--- Render the message! This is a silly example, sorry. --->
	<cfif form.name.len()>
		<p>
			Hello #encodeForHtml( form.name )#, I hope you are well.
		</p>
	</cfif>

	<!--- NOTE: This form just posts BACK TO ITSELF. --->
	<form method="post">
		<p>
			Name:<br />
			<input type="text" name="name" size="30" />

			<button type="submit">
				Submit Form
			</button>
		</p>

		<p>
			<!---
				CAUTION: I'm putting this submit button AFTER the primary submit button so
				that hitting "Enter" while focused on the Input will trigger the primary
				submit button. The browser will take the first Submit found in the form
				when submitting via "Enter"; and we don't want to accidentally make this
				"Preview" button the primary button.
			--->
			<button type="submit" formaction="./preview.cfm" formtarget="_blank">
				Preview
			</button>
		</p>
	</form>

</cfoutput>

index.cfm

<cfscript>

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

</cfscript>
<cfoutput>

	<!--- Render the message! This is a silly example, sorry. --->
	<cfif form.name.len()>
		<p>
			Hello #encodeForHtml( form.name )#, I hope you are well.
		</p>
	</cfif>

	<!--- NOTE: This form just posts BACK TO ITSELF. --->
	<form method="post">
		<p>
			Name:<br />
			<input type="text" name="name" size="30" />

			<button type="submit">
				Submit Form
			</button>
		</p>
	</form>

</cfoutput>

preview.cfm

<cfscript>

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

</cfscript>
<cfoutput>

	<p>
		Hello #encodeForHtml( form.name )#, I hope you are well.
	</p>

</cfoutput>