Hi there,
Hope you guys can help me. I created an input box and a dropdown menu to allow the user to either enter their name in the input box or search their name in the dropdown menu if it existed through a radio item options. However, my problem is I have a hard time try to get the value from the input box or the dropdown menu from a callback. Please help me how to write a callback to get the value from the input box or the dropdown menu that triggered by a button? Please see the code below.----- Thank you
import dash
import flask
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
inline_radio_items = dbc.FormGroup([
dbc.Label("Choose One: "),
dbc.RadioItems(
options=[{“label”: “New”, “value”: “new”},
{“label”: “Search Name”, “value”: “search_name”}],
labelStyle={“margin-right”: 60},
value=“new”,
id=“radio_option”,
inline=True
)
])
input_name_content = dbc.FormGroup([
dbc.Label("User Name: "),
dbc.Input(
id=“user_input_name”,
type=“text”,
placeholder=“Enter your full name…”
)
])
search_dd_name_content = dbc.FormGroup([
dbc.Label(“User Name”),
dcc.Dropdown(
id=“search_dd_name”,
options=[
{“label”: “Arthur Dent”, “value”: “arthur”},
{“label”: “Ford Prefect”, “value”: “ford”},
{“label”: “Zaphod Beeblebrox”, “value”: “zaphod”},
],
searchable=True
)
])
body = dbc.Container(
[
dbc.Row([
dbc.Col(
inline_radio_items,
className=“col-md-12”,
style={“margin-bottom”: 15}
)
]),
dbc.Row([
dbc.Col(
html.Div(id="output_selected_radio"),
className="col-md-12",
style={"margin-bottom": 15}
)
]),
dbc.Row([
dbc.Button("Preview",
id="btn_preview",
size="lg",
n_clicks=0,
className="mr-1")
], style={"margin-bottom": 15}),
dbc.Row([
dbc.Col(
# display the user name
html.Div(id="result_title")
)
])
],
className="mt-4",
)
app = dash.Dash(name, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([body])
app.config.suppress_callback_exceptions = True
@app.callback(
Output(“output_selected_radio”, “children”),
[Input(“radio_option”, “value”)]
)
def display_selected_radio_item(selected_radio):
if selected_radio == “new”:
return input_name_content
elif selected_radio == “search_name”:
return search_dd_name_content
else:
return input_name_content
@app.callback(
Output(“result_title”, “children”),
[Input(“btn_preview”, “n_clicks”)],
[State(“user_input_name”, “value”), State(“search_dd_name”, “value”)]
)
def display_name(btn_preview_clicks, new_input_name, dd_search_name):
if btn_preview_clicks > 0 and new_input_name is not None:
return new_input_name
if btn_preview_clicks > 0 and dd_search_name is not None:
return dd_search_name
elif btn_preview_clicks == 0:
return “”
else:
return “”
if name == “main”:
app.run_server(debug=True)