Associating Submit Buttons With Any Form Using Button Attributes In Native HTML
form attribute and a matching
This isn't the first time that the
button has thrilled and delighted me: a few months ago, I discovered that a
button could override a variety of form submission properties using native attributes. In fact, the use of the
form attribute was right there in the Mozilla docs - it just didn't register in my brain.
The idea here is simple. A submit button can submit any form by using a
form attribute that points to the target form's
id value. In the following snippet, we're using
id="myForm" to bind the external button to the right form.
<form id="myForm"> ... </form> <button type="submit" form="myForm"> Submit Form </button>
Let's see this in action. In the following ColdFusion demo, I have a form that accepts a
name property. By default, the form will "greet" the user with a message. However, externally to the form, I have two other submit buttons that target the form (via the
form attribute) and supply alternative actions for Insult and Flattery:
<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>
In this particular case, there's no actual need for the Insult and Flattery buttons to be outside of the
<form> tag - it's only for the sake of the demo. And, when we run this ColdFusion application and submit the form using the various submit buttons, we get the following output:
As you can see, each of the submit buttons is able to submit the form despite the fact that two of the buttons don't even live inside of the form container! This is great. I love the fact that native HTML can do so much of the heavy lifting for me.
Want to use code from this post? Check out the license.
Back to the basics! It always surprises me how after 30 years, I can still learn something fundamental like this. I've definitely restructured code in the past so that my submit button would be within the form tags, even though that's NOT where I really wanted it.
Definitely! Huge fan of K.I.S.S (keep it simple stupid) or (keep it stupid simple)
Ha! I did not know this!! Cheers for writing it up man.
With HTML and CFML 😉 there's nothing we can't accomplish!
Post A Comment — ❤️ I'd Love To Hear From You! ❤️
Post a Comment →