Скачать или смотреть How to Use Multiple Submit Buttons in JavaScript/Node/EJS Forms

Learn how to effectively manage multiple submit buttons in JavaScript/Node/EJS forms to direct user actions seamlessly.
---
This video is based on the question https://stackoverflow.com/q/71670420/ asked by the user 'FIRES_ICE' ( https://stackoverflow.com/u/12906741/ ) and on the answer https://stackoverflow.com/a/71671873/ provided by the user 'Tasmia A.' ( https://stackoverflow.com/u/8036533/ ) 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: Multiple submit buttons for post in Javascript/Node/EJS

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

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Use Multiple Submit Buttons in JavaScript/Node/EJS Forms

If you're diving into web development with technologies like JavaScript, Node.js, and EJS (Embedded JavaScript), you might find yourself needing to handle multiple submit buttons in a single form. This issue crops up often when creating interactive forms where different actions can be performed based on which button the user clicks.

In this guide, we will walk through a straightforward solution to this problem, ensuring you can differentiate the submit actions from each button. We'll discuss the HTML structure, server-side handling, and how to route users effectively based on their choices.

The Problem

Imagine you have a form with two buttons: one for SignIn and another for Exit. However, pressing either of these buttons currently routes you to the same page, which is rather confusing for users. Here's the relevant segment of code illustrating the form in Home.ejs:

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

Both submit buttons are sending a POST request to the same endpoint, making it impossible for your Node.js server to decipher which button was clicked.

Building a Solution

Step 1: Assign Names to Your Buttons

To resolve this issue, you can assign names to your submit buttons. This allows you to easily identify which button was pressed when the form is submitted. Modify your HTML as follows:

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

Step 2: Update the Server-side Logic to Handle the Button Clicks

In your router.js file, you need to detect which button was clicked based on the form data sent in the POST request. Here's how you can do it:

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

Step 3: Create Endpoints for Each Action

Based on the button pressed, you'll route to different pages. Make sure you have defined routes for each page you want to render. For example, your Express routes might look like this:

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

Conclusion

By following these steps, you have successfully implemented a way to detect multiple submit buttons within a form using JavaScript, Node.js, and EJS. This enhancement greatly improves the user experience since users will now be directed appropriately based on their actions.

Now you can continue building more advanced features into your application, knowing how to handle user inputs flexibly.

Whether you're working on a small project or a larger one, managing multiple submit buttons effectively can ensure a seamless experience for your users.

Feel free to share your thoughts or questions on this topic in the comments below!