Intro
Often you need to send complex data structures with form submissions, for example sending your shopping cart data to the server side. The Form Data component makes it easy to send such data to your server actions.
Page Setup
In our example we will show you how to send the contents of the Data Store component to a server action.
We have a really simple shopping cart page, where you can add products to a data store and you can submit an order via a Server Connect Form. We want to send the contents of the Data Store to the server action using this same form:
The Data Store has a few fields:
Right click the form:
And add the Form Data component:
Select the Form Data component and click the dynamic data picker button in order to select what data to be sent to the server action:
Select data under the Data Store component
And you are done:
On form submit the Form Data component will send the Data Store data.
Server Action Setup
Open the Server Action used with your form and select Input:
Then browse to your page, select the form from the dropdown and click the Import button:
Your form inputs as well as the Form Data component will be imported under $_POST. The schema of the Form Data component will be imported as well, so that you can work with it in your server action steps:
For test purposes we will output the $_POST variables values in set value steps. We output the value of the Form Data component as well:
When we add some products to the shopping cart (data store) and submit the form, in the browser dev tools we can see the Set Value step called products, outputs the data store component data:
That’s how to post complex data objects with your form submissions.
