Skip to content

Improve form submission example UX #40201

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Zehnooo wants to merge 3 commits into from
Closed

Improve form submission example UX #40201

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
153864e
Update index.md
Zehnooo Jul 4, 2025
c3d95d1
Update files/en-us/learn_web_development/core/scripting/dom_scripting…
bsmth Jul 16, 2025
7605bcf
Merge branch 'main' into patch-1
pepelsbey Sep 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions files/en-us/learn_web_development/core/scripting/dom_scripting/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,16 +278,18 @@ The finished demo will look something like this:
To complete the exercise, follow the steps below, and make sure that the list behaves as described above.

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 div 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 storing the current [value](/en-US/docs/Web/API/HTMLInputElement/value) of the input element in a variable.
5. Next, empty the input element by setting its value to an empty string — `''`.
6. Create three new elements — a list item ({{htmlelement('li')}}), {{htmlelement('span')}}, and {{htmlelement('button')}}, and store them in variables.
7. Append the span and the button as children of the list item.
8. Set the text content of the span to the input element value you saved earlier, and the text content of the button to 'Delete'.
9. Append the list item as a child of the list.
10. Attach an event handler to the delete button so that, when clicked, it will delete the entire list item (`<li>...</li>`).
11. 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.
2. Wrap the div that contains the input and button in a form element.
3. Create three variables that hold references to the list ({{htmlelement("ul")}}), {{htmlelement("input")}}, and {{htmlelement("button")}} elements.
4. Create a [function](/en-US/docs/Learn_web_development/Core/Scripting/Functions) that will run in response to the button being clicked.
5. Inside the function body, start off by calling [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault). When combined with the form element, the user can now use the 'enter' key to submit list items. Prevent default keeps the form from refreshing the page in this situation.
6. Next, continue by storing the current [value](/en-US/docs/Web/API/HTMLInputElement/value) of the input element in a variable.
7. Next, empty the input element by setting its value to an empty string — `''`.
8. Create three new elements — a list item ({{htmlelement('li')}}), {{htmlelement('span')}}, and {{htmlelement('button')}}, and store them in variables.
9. Append the span and the button as children of the list item.
10. Set the text content of the span to the input element value you saved earlier, and the text content of the button to 'Delete'.
11. Append the list item as a child of the list.
12. Attach an event handler to the delete button so that, when clicked, it will delete the entire list item (`<li>...</li>`).
13. 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.

Copy link
Member

@pepelsbey pepelsbey Sep 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

> [!NOTE]
> If you get really stuck, have a look at our [finished shopping list](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list-finished.html) ([see it running live also](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html)).
Expand Down
Loading