How to Submit a Form with an Anchor on Dropdown Selection

Learn how to efficiently submit a form with an HTML anchor to jump to specific sections on the page after selection.
---
This video is based on the question stackoverflow.com/q/72850281/ asked by the user 'John Dohh' ( stackoverflow.com/u/12599491/ ) and on the answer stackoverflow.com/a/72850339/ provided by the user 'IT goldman' ( stackoverflow.com/u/3807365/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: onchange Submit Form with Page Anchor

Also, Content (except music) licensed under CC BY-SA meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Submitting a Form with an Anchor on Dropdown Selection

Navigating through a long web page with multiple dropdown menus can be cumbersome, especially when there are many options to choose from. If you’re using a dropdown menu that automatically submits a form upon selection, you might be wondering how to make the page scroll to a specific section based on the selected option. In this guide, we will explore how to submit a form with an HTML anchor so that users are directed to the relevant section of the page after they make their selection.

The Challenge: Managing Multiple Dropdowns

Imagine having around 40 dropdown menus on a single page. Once you reach about the 20th dropdown, you have to constantly scroll up and down to find your next selection. This is not user-friendly, and there's a need for a better solution. The goal is to make the user experience seamless by automatically scrolling to the last dropdown menu that was used upon form submission.

The Solution: Changing the Form Action Dynamically

To achieve this, we need to dynamically set the form's action attribute to include an anchor that corresponds to the selected dropdown menu. Here's a step-by-step guide to implementing this solution:

Step 1: JavaScript Function to Change Form Action

We will create a JavaScript function that sets the action of the form to include a specific URL with an anchor before submission. Here's the code for this function:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Listening for Dropdown Changes

Next, we will attach an event listener to each dropdown menu. When a user selects an option, the listener will capture the name of the dropdown and pass it to change_url() to set the form action dynamically.

[[See Video to Reveal this Text or Code Snippet]]

Step 3: HTML Structure of the Form

Here’s a sample HTML structure that utilizes the aforementioned JavaScript. This form has multiple dropdown menus with associated anchors:

[[See Video to Reveal this Text or Code Snippet]]

Step 4: Putting It All Together

When the user makes a selection from any of the dropdowns, the form will execute the JavaScript function, setting the action to include the appropriate anchor related to that dropdown, and then submitting the form. Upon submission, the browser will navigate to the specified section of the page, providing a better user experience.

Conclusion

By implementing these steps, you can easily create a form that not only submits data, but also enhances navigation on long pages with multiple options. Utilizing JavaScript to set the form action dynamically allows for a more user-friendly interface, significantly improving the overall experience for users interacting with various dropdown menus.

Following these guidelines will ensure that your web applications remain efficient and intuitive. Happy coding!