Submit one button for all Forms in multiple tabs

Hi gens,

I’m trying to have a ModalDialog with several Tabs, and in each tab there are several Forms (from: DataPicker, TextField, UserPicker, Select, etc.). However I would like for the user when clicking on a Submit the Forms from all tabs and not just the current tab.
Here is an example of my current setup using the Forge UI:

<Fragment>
  <ModalDialog>
     <Form onSubmit={onSubmit}>
       <Tabs>
           <Tab label="Tab 1">             
              <DatePicker name="test 1" />
             <TextField label="test 2" name="test 2"/>
             <UserPicker label="user" name="user" />
          </Tab>
          <Tab>
            <Select label="Test 3" name="test 3" />
                 <Option value="test31" label="test31" />
                 <Option value="test32" label="test32" />
            </Select>
          </Tab>
       </Tabs>
    </Form>
 </ModalDialog>
</Fragment>

In the above example when ever I click after proving the input it sent input only of the last tab and not all form fields.
Is there any way that all the value after Submit click could be stored into the issue?
Or for each Tab I would need to have a Submit button and after clicking going to next Tab?

Thanks in advance and looking forward for suggestions.

:pray:

3 Likes

I’m not sure but it looks like changing tab cleans the state of each component. You could save the state of the form using useState and then submit the form state on submit.

3 Likes

Switching from one tab to another clears a UI component state in the first. The way to preserve the tab components state looks attractive. But how can I do this? There is no such event handler onTabChange…

1 Like