I have a form that collects both user information and product information. The user information includes name, email, and address, while the product information includes name, description, and price. I want to store the user information in one database and the product information in another database, so I need to submit the data to two different server-side scripts.
To accomplish this, I have considered creating separate forms for each type of data, but this would be inconvenient and confusing for users. Instead, I am exploring the option of using a single HTML form to submit the data to both server-side scripts.
2
Answers
That doesn’t follow. A single server-side script can write to two different databases. That’s what I’d recommend you do. It’s the simplest, most straight-forward approach.
But if you don’t want to do that for some reason, you can send the information to two separate endpoints, in at least a couple of ways:
Use client-side JavaScript triggered by form submission to send the data to the two endpoints, for instance via
fetch.If you can’t use client-side JavaScript for some reason, you could submit to the first endpoint, have it record the data to the database, then have it respond with a redirect to the other endpoint, which records it in the second. Redirect codes 307 and 308 work with both GET and POST. That’s pretty cumbersome, but feasible.
Again, though, a single server-side script that writes to both databases would be the simpler approach.
Yes, just listen to the submit event using JavaScript, prevent the page from reloding using event.preventDefault(), collect the data you want to send to each backend endpoint using JavaScript and send it to each endpoint using separate fetch calls. Depedning on your backend you might have to adjust how you send it with fetch (either using raw JSON or FormData formatted data).
If you need info about how fetch works, here’s a good starting point:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch