As web developers, we know that most of the create, read update, and delete (CRUD) actions we perform on the web are typically (hopefully?) done using an HTML form.
HTML Forms
HTML Forms are cool because they have plenty of built-in features.
For example, they have native form validation and access to all the inputs in a form, and at some point, because you need to submit the form, there is a mechanism to do that as well. You can use a button, <button>submit</button> or an input of type submit, <input type="submit" />, although the latter isn't used as much these days in new sites, from what I've seen.
Here is a simple form to exhibit this.
If you fill out the form and click submit, the form will submit and add a paragraph with dark green text client-side that says, "Form submitted".
There are other things in the simple form, like form validation via the required attribute on inputs, but that's not what we're here to discuss.
What we want to touch on is that the form was able to handle the submit event because it had a submit button associated with it, which was defined in HTML within the form element.
Note: you can press enter in fields to submit a form, but again, not what we're here to discuss.
How I Broke My Form
This brings us to a new feature that I was working on for OpenSauced for a few months, workspaces. I encourage you to create your own, but for now, let's get back to the business of forms.
Here's our beautiful workspaces settings page that I implemented.
Recently, there were styling changes, which is what you see above.
fix: now workspace settings and new page have a fixed footer for CTAs
#2982
- [ ] 🍕 Feature
- [x] 🐛 Bug Fix
- [ ] 📝 Documentation Update
- [ ] 🎨 Style
- [ ] 🧑💻 Code Refactor
- [ ] 🔥 Performance Improvements
- [ ] ✅ Test
- [ ] 🤖 Build
- [ ] 🔁 CI
- [ ] 📦 Chore (Release)
- [ ] ⏩ Revert
Fixes #2924
Before
After
Settings Page
New Workspace Page
- Go to your workspace settings page, e.g. /workspaces/some-worspace-id/settings
- Scroll through the settings.
- Notice the Update workspace button remains in a fixed footer and content scrolls underneath it.
- Do the same thing for the create new workspace page, /workspaces/new, and the same behaviour occurs.
- [ ] 📜 README.md
- [ ] 📓 docs.opensauced.pizza
- [ ] 🍕 dev.to/opensauced
- [ ] 📕 storybook
- [x] 🙅 no documentation needed
Everything looked great, and I had tested it.
Narrator: he thought he had tested it, and we shipped things to production.
Once things went live, I decided to do some smoke tests, which I usually do. I went over to the beautiful workspace settings I had worked on, made some changes in the settings, and then clicked Update Workspace button. Hmm, no toast message saying the settings were updated. I checked the browser dev tools to see if there were any JavaScript errors. Nothing related to the updates. And then it dawned on me. The submit button was outside the form, and I just broke some key functionality in the app.
Side note, but luckily thanks to Netlify's deployment rollback feature, I was able to revert to the previous production deployment within about a minute of the workspace settings page being broken 😅
How I Fixed My Form
So how did I fix it? We needed this new styling to fix several other issues related to z-indexes and layout.
For some context, the OpenSauced application is a Next.js site, so React, but I decided to put on my old school HTML hat and remembered that form elements can be associated to a form via a form attribute. What you need to do is give the form an id attribute, and the form element that you want to associate the form to needs to have a form attribute whose value is the value of the id attribute for the form.
Here's another simple form demonstrating a simplified version of my fix.
I encourage you to remove the form attribute from the button in the above CodePen to see the issue I caused.
Here's the fix I rolled out to production.
fix: fixed a regression with workspaces not updating/creating
#3003
Fixes a regression by the submit button for creating and updating workspaces was no longer in the form. The fix leverages the button form attribute.
- [ ] 🍕 Feature
- [x] 🐛 Bug Fix
- [ ] 📝 Documentation Update
- [ ] 🎨 Style
- [ ] 🧑💻 Code Refactor
- [ ] 🔥 Performance Improvements
- [ ] ✅ Test
- [ ] 🤖 Build
- [ ] 🔁 CI
- [ ] 📦 Chore (Release)
- [ ] ⏩ Revert
Relatest to #2982
- Go to
/workspaces/new - Enter a name, description optional.
- Click on the Create Workspace button.
- The workspace is created.
- Go to
/workspaces/some-workspace-id/settings. - Update something about the workspace.
- Click the Update Workspace button.
- The workspace updates.
- [ ] 📜 README.md
- [ ] 📓 docs.opensauced.pizza
- [ ] 🍕 dev.to/opensauced
- [ ] 📕 storybook
- [x] 🙅 no documentation needed
Wrapping Up
Learning a framework is great, and I'm a big proponent of just building something, but as you continue on in your career, it's great to start getting some fundamentals into the mix.
Also, this is a perfect example of why using semantic HTML is important! It definitely helped me get out of jam! 😅
Stay saucy peeps!
If you would like to know more about my work in open source, follow me on OpenSauced.
Top comments (2)
Great post, Nick!
I've said it before, but I love reading posts where someone talks through their mistakes and then reveals the fix. Good stuff!
Thanks Michael!