Created
April 12, 2023 12:27
-
-
Save bennadel/16b101587fad08bb4004ca1d9c7f97f4 to your computer and use it in GitHub Desktop.
Associating Submit Buttons With Any Form Using Button Attributes In Native HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form id="myForm"> | |
... | |
</form> | |
<button type="submit" form="myForm"> | |
Submit Form | |
</button> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment