DEV Community

Cover image for Submit 2 or More forms in one button click
Arman Rahman
Arman Rahman

Posted on

Submit 2 or More forms in one button click

#html #form #webdev #javascript

Suppose you have two from on your web page in different places. but you want to submit two forms in one click. Then use -

Your HTML:

<form id="form1"> <!-- Form 1 fields --> <input type="text" name="field1" placeholder="Field 1"> </form> <form id="form2"> <!-- Form 2 fields --> <input type="text" name="field2" placeholder="Field 2"> </form>
Enter fullscreen mode Exit fullscreen mode

JS:

window.addEventListener('load', function() { // Get form data let form1 = new FormData(document.getElementById('form1')); let form2 = new FormData(document.getElementById('form2')); // Combine both forms data into URLSearchParams let urlParams = new URLSearchParams(); form1.forEach((value, key) => { urlParams.append(key, value); }); form2.forEach((value, key) => { urlParams.append(key, value); }); // Redirect to a new URL with combined form data window.location.href = '/submit-both-forms?' + urlParams.toString(); });
Enter fullscreen mode Exit fullscreen mode

This will send a get request to the location.

Top comments (0)