abdullah/til
1
0
Fork 0
mirror of https://github.com/jbranchaud/til synced 2026-01-03 07:08:01 +00:00
Code Issues Projects Releases Wiki Activity

Add Determine Which Button Submitted The Form as an HTML TIL

Browse Source
This commit is contained in:
jbranchaud
2022-05-21 16:15:29 -05:00
parent 761fa46704
commit 3177917096
2 changed files with 36 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -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)

34
html/determine-which-button-submitted-the-form.md Normal file
View File

@@ -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.