How to Submit Data with Multiple Form in JavaScript

HTML Setup: Create your HTML file with multiple forms, each containing the necessary input fields and a submit button. Make sure to assign unique IDs to each form so they can be easily identified in JavaScript.

JavaScript Code: Add JavaScript code to handle form submissions and perform the necessary actions. You can use the 'addEventListener' method to listen for the submit event on each form.

In the above code, we first retrieve references to each form using their unique IDs (form1 and form2). We then add event listeners to each form's submit event, which calls the submitForm function. This function prevents the form from submitting normally, gets the form data using the FormData object, performs any necessary actions with the data (e.g., sending it to a server), and optionally resets the form fields.


The sendDataToServer function demonstrates how you can use AJAX (specifically the Fetch API in this example) to send the form data to a server endpoint. Adjust the URL and method (POST, GET, etc.) based on your server requirements.


You can add more forms following the same pattern by creating the necessary HTML structure and handling their submission in the JavaScript code.