Improve form submission example UX

[Zehnooo]

Made changes that result in what is believed to be a cleaner workflow.

Description

Added the form element to allow the user to hit enter to submit a list item, thus preventDefault() is also necessary.

Motivation

This change makes the Shopping List Example more efficient and more realistic to what you would see in real world forms. It betters the project because we are using focus() to return back to the input, but the user now needs to move their mouse to click submit each time. Now the user doesn't leave the keyboard.

Additional details

preventDefault()

Related issues and pull requests

[github-actions]

Preview URLs

• /en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting

Flaws (2)

URL: /en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting
Title: DOM scripting introduction
Flaw count: 2

• unknown:
  • Error serializing baseline for numeric-seperators: missing field description``
  • Error serializing baseline for single-color-gradients: missing field description``

(comment last updated: 2025-09-22 16:39:08)

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[bsmth]

@Zehnooo there's a few conflicts to tidy up if you'd like to have another look. Note that it's been recently updated here: https://github.com/mdn/content/pull/40272/files#diff-5420297a1ac07992ae6627ed71d6c6bf7da2b504262df318be9dda81fe79e5c3

[mao-sz]

Would it not be better to just change the div to a form instead? As opposed to instructing the learner to wrap the div in a form. Then the only addition needed to the instructions would be preventDefault(). Feels odd to have it in a div in the first place than to task the learner to wrap in a form when it the point is more on the DOM side.

Both shopping-list.html and shopping-list-finished.html would also need amending accordingly, as would the HTML for the demo iframe (since currently, that demo does not allow form submission via hitting Enter).

[pepelsbey]

This looks like a great UX improvement, thanks! I suggested replacing the div with a form and providing it by default, like @mao-sz suggested, so users can focus on writing JS, as it was initially. I opened a PR making this change in the learning area:

• mdn/learning-area#820

The only thing we need to make it work, is to similarly fix the inline demo in the same markdown file a few lines above. @Zehnooo let me know if you like the idea and up for making these changes.

[pepelsbey]

Suggested change

	1. To start with, download a copy of our [shopping-list.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list.html) starting file and make a copy of it somewhere. You'll see that it has some minimal CSS, a form with a label, input, and button, and an empty list and {{htmlelement("script")}} element. You'll be making all your additions inside the script.
	2. Create three variables that hold references to the list ({{htmlelement("ul")}}), {{htmlelement("input")}}, and {{htmlelement("button")}} elements.
	3. Create a [function](/en-US/docs/Learn_web_development/Core/Scripting/Functions) that will run in response to the button being clicked.
	4. Inside the function body, start off by calling [`preventDefault()`](/en-US/docs/Web/API/Event/preventDefault). When wrapped in the form element, the input will trigger the form to submit when the user presses the <kbd>Enter</kbd> key. This will keep the form from refreshing the page and will add a new item to the list.
	5. Continue by storing the current [value](/en-US/docs/Web/API/HTMLInputElement/value) of the input element in a variable.
	6. Next, empty the input element by setting its value to an empty string — `""`.
	7. Create three new elements — a list item ({{htmlelement('li')}}), {{htmlelement('span')}}, and {{htmlelement('button')}}, and store them in variables.
	8. Append the span and the button as children of the list item.
	9. Set the text content of the span to the input element value you saved earlier, and the text content of the button to 'Delete'.
	10. Append the list item as a child of the list.
	11. Attach an event handler to the delete button so that, when clicked, it will delete the entire list item (`<li>...</li>`).
	12. Finally, use the [`focus()`](/en-US/docs/Web/API/HTMLElement/focus) method to focus the input element, ready for entering the next shopping list item.

• Removes the “wrap in a form” part
• Mentions that it’s already wrapped in a form
• Improves the preventDefault explanation a bit

[pepelsbey]

Alright, I'll do it myself then. Thanks for the idea anyway :)