From 3177917096d6884e44d692bff2914a8d38a32615 Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Sat, 21 May 2022 16:15:29 -0500
Subject: [PATCH] Add Determine Which Button Submitted The Form as an HTML TIL

---
 README.md                                     |  3 +-
 ...termine-which-button-submitted-the-form.md | 34 +++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 html/determine-which-button-submitted-the-form.md

diff --git a/README.md b/README.md
index 6a106cb..a37d023 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
 
-_1201 TILs and counting..._
+_1202 TILs and counting..._
 
 ---
 
@@ -353,6 +353,7 @@ _1201 TILs and counting..._
 ### HTML
 
 - [Adding Alt Text To An Image](html/adding-alt-text-to-an-image.md)
+- [Determine Which Button Submitted The Form](html/determine-which-button-submitted-the-form.md)
 - [Disable Auto-Completion For A Form Input](html/disable-auto-completion-for-a-form-input.md)
 - [Prevent Search Engines From Indexing A Page](html/prevent-search-engines-from-indexing-a-page.md)
 - [Render Text As Superscript](html/render-text-as-superscript.md)
diff --git a/html/determine-which-button-submitted-the-form.md b/html/determine-which-button-submitted-the-form.md
new file mode 100644
index 0000000..6f69813
--- /dev/null
+++ b/html/determine-which-button-submitted-the-form.md
@@ -0,0 +1,34 @@
+# Determine Which Button Submitted The Form
+
+It is pretty common for a form to have a singular submit button. If the user
+clicks 'Submit', then the form fires a `POST` off to the server, the server can
+process the request, and that's it.
+
+But what about a form that has two or more buttons? For instance, imagine some
+kind of consent form where the user needs to either _Accept_ or _Reject_ some
+terms.
+
+Just like other inputs, [the `<button>` tag can take both `name` and `value`
+attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name).
+
+```html
+<form action="/terms" method="post">
+  <p>Something about the terms ...</p>
+  <div>
+    <label for="name">Email: </label>
+    <input type="email" name="email" id="email" required>
+  </div>
+  <div>
+    <button type="submit" name="commit" value="accept">Accept</button>
+    <button type="submit" name="commit" value="reject">Reject</button>
+  </div>
+</form>
+```
+
+In addition to the `email` attribute, when the user submits the form, it will
+include a `commit` attribute that has a value of either `'accept'` or
+`'reject'`.
+
+Naming it `commit` is [a convention I'm borrowing from Rails's form
+helpers](https://guides.rubyonrails.org/v5.0/form_helpers.html#a-generic-search-form).
+You can name it whatever makes sense to you.