How to clear input after clicking in button submit in Dash?

Question

I’m trying to clear a dcc.input` in dash after clicking and returning the results with a submit button and I can’t do it. I don’t know what I’m doing wrong can you please help?

I already read this links:

This is my code for submitting:

    html.Div(children=[
            html.Div(children=[
            html.P('Requester', className='Requester'),
                dcc.Input(id='requester', value='', placeholder='Enter the requester', type='text'),
            html.Div(id='my-requester'),
            ]),
            html.Button('Submit', id='submit-val', n_clicks=0),
            html.Div(id='container-button-basic',
                children='Enter a value and press submit')    
        ]),
    ]
)

@app.callback(
    Output('container-button-basic', 'children'),
    Input('submit-val', 'n_clicks'),
    State('requester', 'value')
)
def update_output(n_clicks, requester):
    if n_clicks > 0:
        print(requester)
        return [n_clicks, requester]

I just want to clear a text box after clicking submit, or in the worst case do a Clear button to clear the textboxes I have in dash.

Asked By: Ricardo Alves

||

Source

Answer 1

You just need to add a second Output to your callback like this:

Output('requester', 'value')

and have your callback return another value, and make it an empty string. Here’s an example:

return [n_clicks, requester], ''

Answered By: coralvanda

Answer 2

coralvanda’s answer is correct. I’m commenting simply to add some info.

If you have multiple input boxes you want to clear, you must add multiple additional outputs, and you must also add multiple ”. For example, assuming you had 2 more input boxes and the id for those were extraInput1 and extraInput2, this is what you would need to add:

Output('container-button-basic', 'children'),
Output('requester', 'value'),
Output('extraInput1', 'value'),
Output('extraInput2', 'value'),  
Input('submit-val', 'n_clicks'),
State('requester', 'value')

and convert your return statement to the following:

return [n_clicks, requester], '', '', '', ''

It is important that the order of the items in the return statement are in the same order as the Outputs. For example, the below code won’t work:

return '', '', '', '', [n_clicks, requester]

Answered By: haaz

How to clear input after clicking in button submit in Dash?

Question:

Answers: