Multi input to single output in Dash

Question

I am wanting to have a multi field input where someone enters the elements of an address and then that address is returned to them as a complete single string after pressing a submit button. So far I have the following which produced the entry fields and submit button but nothing happens when I enter a new address. I am unsure of how to make this happen:

app = dash.Dash()

app.layout = html.Div([
    html.H1("Input new address"),
    dcc.Input(
        id = 'Property_name',
        placeholder='Property Name',
        type = 'text',
        value = '',
    ),
    dcc.Input(
        id = 'Stree_name',
        placeholder='Street Name',
        type = 'text',
        value = '',
    ),
    dcc.Input(
        id = 'City',
        placeholder = 'City',
        type = 'text',
        value = '',
        ),
    dcc.Input(
        id = 'Zip_code',
        placeholder = 'Zip code',
        type = 'text',
        value = '',
        ),
    dcc.Input(
        id = 'Country',
        placeholder = 'Country',
        type = 'text',
        value = '',
        ),
    html.Button(id='Submit_address', n_clicks=0, children='Submit'),
    html.Br(),
    html.Div(id = 'address'),
    ])


@app.callback([
    Output('address', 'children')],
    [Input('Property_name', 'value'),
     Input('Stree_name', 'value'),
     Input('City', 'value'),
     Input('Zip_code', 'value'),
     Input('Country', 'value')
     ])

def update_map(n_clicks, address):
    if n_clicks is None:
        return dash.no_update
    else:
        return f"Added new address at GeoCords: {address}"

if __name__ == '__main__':
    app.run_server(debug=False)

Stimmot · Accepted Answer · 2020-09-15 14:10:13Z

1

You should be able to trigger the callback via the submit button by using the submit button as an input and the values as states, like this:

@app.callback(
    [Output('address', 'children'],
    [Input('Submit_address', 'n_clicks')],
    [State('Property_name', 'value'),
     State('Stree_name', 'value'),
     etc.
    ])
def update_children(n, prop_name, stree_name, etc.):
    [your function here]

Didn't test the code, but that is how I did it in my project. Does that help you?

EDIT:

Here you go, this code works. You just have to edit the function to output the string you want.

import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State
from dash import dash

app = dash.Dash()

app.layout = html.Div([
    html.H1("Input new address"),
    dcc.Input(
        id='Property_name',
        placeholder='Property Name',
        type='text',
        value='',
    ),
    dcc.Input(
        id='Stree_name',
        placeholder='Street Name',
        type='text',
        value='',
    ),
    dcc.Input(
        id='City',
        placeholder='City',
        type='text',
        value='',
    ),
    dcc.Input(
        id='Zip_code',
        placeholder='Zip code',
        type='text',
        value='',
    ),
    dcc.Input(
        id='Country',
        placeholder='Country',
        type='text',
        value='',
    ),
    html.Button(id='Submit_address', n_clicks=0, children='Submit'),
    html.Br(),
    html.Div(id='address'),
])


@app.callback(
    [Output('address', 'children')],
    [Input('Submit_address', 'n_clicks')],
    [State('Property_name', 'value'),
     State('Stree_name', 'value'),
     State('City', 'value'),
     State('Zip_code', 'value'),
     State('Country', 'value')])
def update_map(n_clicks, prop_name, street, city, zip, country):
    print(prop_name)
    return [html.Div(f"Added new address at GeoCords: {prop_name}")]


if __name__ == '__main__':
    app.run_server(debug=False)

edited Sep 15, 2020 at 14:10

answered Sep 15, 2020 at 11:47

Stimmot

1,2991 gold badge11 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Lamma Over a year ago

State does not seem to be a thing in Dash

Lamma Over a year ago

Ah Stateis found in dash.dependencies.State. Unfortunately this does not work though

Lamma Over a year ago

Thanks for this, unfortunately is still produces no output after pressing the submit button.

Stimmot Over a year ago

It did in my test project, make sure all dependencies are installed and that you put any text in the first field, which I used to demonstrate. If the field is emtpy, it will only say "Added new address at GeoCords:"

Lamma Over a year ago

I will test this :) It does not even show the "Added new address at GeoCords:" bit though.

Collectives™ on Stack Overflow

Multi input to single output in Dash

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related