Hello!
I have a dash script which has the users filling in a form; first with inputs then filling in a dropdown datatable. I need to take these inputs once they are filled in, and after clicking the ‘Submit’ button, will be stored as a pandas dataframe or dictionary or stored in the database (whichever is easiest, to be frank 
)
I feel like I may need to use dcc.Store but I’m uncertain on how to proceed.
Any help appreciated, thank you!
app.layout = html.Div(
children=[
html.H1(children='Technology Information',
style={'font-family': 'calibri'}),
dcc.Store(id='store-form-info', data={'form-submission': pd.DataFrame()}),
dbc.FormGroup([
dbc.Label('Technology Name:',
html_for='tech-name-row',
style={'font-family': 'calibri',
'margin-right': '4em'}),
dbc.Col(dbc.Input(type='technology',
id='tech-name-row',
placeholder='Enter Technology Name',
style={'display': 'inline-flex',
'verticalAlign': 'middle',
'height': '25px'}),
style={'display': 'inline-flex',
'verticalAlign': 'middle'}),
], row=True, style={'margin-bottom': '1em'}),
html.Label(["Technology Type:", dcc.Dropdown(id="tech-type-drop",
style={'display': 'inline-block',
'width': '175px',
'height': '28px',
'margin-left': '2.3em',
# 'margin-bottom': '2.5em',
'verticalAlign': 'middle',
'font-size': '15px'},
placeholder='Select Type',
options=[
{"label": "Type 1", "value": "1"},
{"label": "Type 2", "value": "2"},
{"label": "Type 3", "value": "3"}])],
style={'font-family': 'calibri',
'margin-right': '4em',
'display': 'flex'}),
html.H1(' '),
html.H1(' '),
html.H2('Process Information',
style={'font-family': 'calibri',
'margin-right': '0.5em',
'margin-top': '3em',
'display': 'inline'}),
html.Button(children='+',
id='add_process_button',
style={'background-color': '#38BC23',
'display': 'inline'}),
html.Div(id='process_list', children=[]),
html.Button(children='Submit',
id='submit-form',
type='submit',
style={'background-color': '#0099ff',
'margin': '1em'}),
]
)
@app.callback(
Output('process_list', 'children'),
[Input('add_process_button', 'n_clicks'),
Input({'type': 'remove_process_button', 'index': ALL}, 'n_clicks')],
[State('process_list', 'children')])
def add_step(n_clicks, _, div_list):
input_id = dash.callback_context.triggered[0]["prop_id"].split(".")[0]
if "index" in input_id and n_clicks is not None:
delete_form = json.loads(input_id)["index"]
div_list = [form for form in div_list if "'index': " + str(delete_form) not in str(form)]
else:
div_list += [html.Div(children=[
html.Button(children='-',
id={'type': 'remove_process_button', 'index': n_clicks},
style={'background-color': 'red',
'display': 'inline',
'float': 'right',
'margin': '1em'}),
dbc.Col(
dbc.FormGroup(
[dbc.Label("Process Name",
html_for="process-name",
style={'font-family': 'calibri',
'margin-right': '2em'}),
dbc.Input(id="process-name",
placeholder="Enter Process Name")],
style={'margin': '1em'})),
html.Div(children=[
dash_table.DataTable(id='process-table',
data=[{}],
style_table={'margin': '2em', 'width': '90%', 'display': 'inline-block'},
style_cell={'font-family': 'calibri', 'textAlign': 'left'},
columns=[{'id': 'Product', 'name': 'Product', 'presentation': 'dropdown'},
{'id': 'Function', 'name': 'Function', 'presentation': 'dropdown'},
{'id': 'Conversion Factor', 'name': 'Conversion Factor',
'presentation': 'dropdown'},
{'id': 'Measure Unit', 'name': 'Measure Unit',
'presentation': 'dropdown'}],
editable=True,
dropdown={'Product': {'options': [{'label': i, 'value': i} for i in
['Benzene', 'HDPE', 'Propylene']]},
'Function': {'options': [{'label': i, 'value': i} for i in
['Input1', 'Input2', 'Input3']]},
'Conversion Factor': {'options': [{'label': i, 'value': i} for i in
['1', '2', '3']]},
'Measure Unit': {'options': [{'label': i, 'value': i} for i in
['Tonne', 'Kilo', 'Gram']]},
}),
html.Div(id='process-table-container')
])],
id={'type': 'process_form', 'index': n_clicks},
style={'border': '2px black solid',
'margin': '1em'}
)]
return div_list