# Input two or more button - How to tell which button is pressed?

**URL:** <https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788>\
**Category:** Dash Python\
**Created:** [September 15, 2017, 7:50am UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788 "2017-09-15T07:50:11Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![kfyao](https://avatars.discourse-cdn.com/v4/letter/k/a6a055/32.png) [@kfyao](https://community.plotly.com/u/kfyao)\
**Post date:** [September 15, 2017, 7:50am UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/1 "2017-09-15T07:50:11Z")

</div>

> **Edit, November 19, 2018** - This issue has been **solved** , see the solution below: [post#29](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/29)

Imagine following code, there are two buttons bound to the same callback. The target is to identify which button is pressed in the callback. What is the best way?  
The application scenario is like one button for page up, the other button for page down. Press button-1 the figure shows data that is newer while press button-2 the figure shows data that is older.

```auto
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output, Event, State
app = dash.Dash()
def getLayout():
    return html.Div([
        html.H1(id='Title1',children='Multiple Button Test',style={'text-align':'center'}),
        html.Div(id='Title2', children='''
            Test multi button in a single page.
        ''',style={'margin-bottom':'50px','text-align':'center'}),
        html.Div(dcc.Markdown('''''',id='div1')),
        html.Button(id='btn1',children='button1'),
        html.Button(id='btn2',children='button2'),
    ])
app.layout = getLayout
@app.callback(Output('div1', 'children'),
              inputs=[Input('btn1', 'n_clicks'),
              Input('btn2', 'n_clicks')])
def update_div_1(n1,n2):
    print('$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$',n1,n2)
    #
    # How to tell which button is pressed in callback context
    #
    return '''button1 clicks *'''+str(n1)+'''* times\n'''+'''button2 clicks *'''+str(n2)+'''* times'''
if __name__ == ' __main__':
    app.run_server(debug=True, port=10092, host='0.0.0.0')
```

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [September 15, 2017, 3:32pm UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/2 "2017-09-15T15:32:54Z")

</div>

It’s currently not possible to tell which `Input` was fired. This may change in the future by introducing something like a `PreviousState` option in the `app.callback`.

> [@kfyao](#):
>
> The application scenario is like one button for page up, the other button for page down. Press button-1 the figure shows data that is newer while press button-2 the figure shows data that is older.

For now, you’ll have to figure out another way to represent this UI. Perhaps a slider that represents time?

---

<div class="post-metadata">

**Author:** ![kfyao](https://avatars.discourse-cdn.com/v4/letter/k/a6a055/32.png) [@kfyao](https://community.plotly.com/u/kfyao)\
**Post date:** [September 17, 2017, 3:05pm UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/3 "2017-09-17T15:05:32Z")

</div>

Thanks @chriddyp  
I’m considering your suggestion.

---

<div class="post-metadata">

**Author:** ![wolftorn](https://avatars.discourse-cdn.com/v4/letter/w/58956e/32.png) [@wolftorn](https://community.plotly.com/u/wolftorn)\
**Post date:** [September 21, 2017, 9:16am UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/4 "2017-09-21T09:16:11Z")

</div>

I have a very similar problem… I have to graphs with some data and text area + img which are supposed to be updated based on hover data from the currently active graph. As it’s impossible to create two different callbacks with the same output I’m forced to implement something like this:  
@app.callback(  
Output(‘image1’, ‘src’),  
[Input(‘plot1’, ‘hoverData’), Input(‘plot2’, ‘hoverData’)])  
def display\_product\_image(hoverData, hoverData2):  
print(hoverData)  
print(hoverData2)  
return "omg…"  
As both `hoverData` and `hoverData2` are filled I cannot say what’s the source of the update.

I think it’s not a matter of my bad ui design, it’s rather a limitation of Dash (for comparison it can be easily done in Shiny).  
Any idea how to solve it?

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [October 4, 2017, 10:26pm UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/5 "2017-10-04T22:26:26Z")

</div>

Thanks for posting @wolftorn! I think that I’m finally convinced that they are valid use-cases for this.

I’ve created an experimental branch in [https://github.com/plotly/dash/pull/140](https://github.com/plotly/dash/pull/140) and [https://github.com/plotly/dash-renderer/pull/25](https://github.com/plotly/dash-renderer/pull/25) that adds support for this by adding a `PrevInput` parameter in the callbacks.

I’ll keep those PRs updated with progress. It may take a while for this to get released as it is a substantial addition to Dash’s (minimal) API.

---

<div class="post-metadata">

**Author:** ![rad](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/rad/32/2177_2.png) [@rad](https://community.plotly.com/u/rad)\
**Post date:** [November 6, 2017, 6:45pm UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/6 "2017-11-06T18:45:59Z")

</div>

@kfyao, you were very close to figuring this out! You can store the previous click state in a global variable (see warning below) and then compare the previous with the current state.

```auto
from collections import OrderedDict

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output, Event, State
app = dash.Dash()

N_CLICKS = OrderedDict([('btn1',0), ('btn2',0)])

def getLayout():
    return html.Div([
        html.H1(id='Title1',children='Multiple Button Test',style={'text-align':'center'}),
        html.Div(id='Title2', children='''
            Test multi button in a single page.
        ''',style={'margin-bottom':'50px','text-align':'center'}),
        html.Div(dcc.Markdown('''''',id='div1')),
        html.Button(id='btn1',children='button1'),
        html.Button(id='btn2',children='button2'),
    ])
app.layout = getLayout
@app.callback(Output('div1', 'children'),
              inputs=[Input('btn1', 'n_clicks'),
              Input('btn2', 'n_clicks')])
def update_div_1(*new_clicks):
    global N_CLICKS
    btn_clicked = ''
    n_clicks_clicked = 0
    for (button, n_click_old), n_click_new in zip(N_CLICKS.items(), new_clicks):
        if n_click_new > n_click_old:
            btn_clicked = button
            n_clicks_clicked = n_click_new
    
    N_CLICKS[state_clicked] = n_clicks_clicked
    return btn_clicked 

if __name__ == ' __main__':
    app.run_server(debug=True, port=10092, host='0.0.0.0')

```

This is just an example, for actual production implementation remember to share data between callbacks safely and **DO NOT USE A GLOBAL VARIABLE** [More info](https://plot.ly/dash/sharing-data-between-callbacks)

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [November 7, 2017, 1:14am UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/7 "2017-11-07T01:14:31Z")

</div>

Remember, using `global` variables is not safe. Do not mutate `global` variables. Your apps will break if multiple people are using them at the same time or if they are run on multiple workers.

If you or your company needs official support for these features ([https://github.com/plotly/dash/pull/1405](https://github.com/plotly/dash/pull/1405) and [https://github.com/plotly/dash-renderer/pull/25](https://github.com/plotly/dash-renderer/pull/25)) and can help sponsor the work, please reach out: [https://plot.ly/products/consulting-and-oem/](https://plot.ly/products/consulting-and-oem/)

---

<div class="post-metadata">

**Author:** ![mikesmith1611](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mikesmith1611/32/2130_2.png) [@mikesmith1611](https://community.plotly.com/u/mikesmith1611)\
**Post date:** [November 27, 2017, 3:16pm UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/8 "2017-11-27T15:16:59Z")

</div>

Just wondering if there is any progress on getting this implemented? I see that there has been no change on the PRs. This is the one feature that seems to be limiting my Dash apps at the moment ! Thanks

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [November 27, 2017, 4:35pm UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/9 "2017-11-27T16:35:54Z")

</div>

There have not been any updates on this yet. You could create a custom build based off of those PRs. I can’t say for sure when we’ll have the time to wrap this up, however we can dedicate more resources to this feature if a company or organization is able to [sponsor it](https://plot.ly/products/consulting-and-oem).

---

<div class="post-metadata">

**Author:** ![rad](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/rad/32/2177_2.png) [@rad](https://community.plotly.com/u/rad)\
**Post date:** [November 27, 2017, 4:38pm UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/10 "2017-11-27T16:38:06Z")

</div>

Tabs are _basically_ this, they just look different and might have to be styled a lot…

---

<div class="post-metadata">

**Author:** ![kevinmcl](https://avatars.discourse-cdn.com/v4/letter/k/8dc957/32.png) [@kevinmcl](https://community.plotly.com/u/kevinmcl)\
**Post date:** [December 31, 2017, 4:22am UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/11 "2017-12-31T04:22:01Z")

</div>

I’ve run in to the same problem. I have a dropdown which selects from a list of values. I would like to have “Previous” and “Next” buttons to make walking though the list easier.

What is the reason for only allowing one callback per output? Having multiple callback functions seems like the easiest solution.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [January 2, 2018, 6:48pm UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/12 "2018-01-02T18:48:33Z")

</div>

> [@kevinmcl](#):
>
> What is the reason for only allowing one callback per output? Having multiple callback functions seems like the easiest solution.

Allowing multiple callbacks to share the same output causes too much ambiguity (what happens when there are overlapping inputs?) and violates the zen of python rule “there should be one way to do things”.

---

<div class="post-metadata">

**Author:** ![mikesmith1611](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mikesmith1611/32/2130_2.png) [@mikesmith1611](https://community.plotly.com/u/mikesmith1611)\
**Post date:** [January 3, 2018, 9:20am UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/13 "2018-01-03T09:20:09Z")

</div>

What if you could allow multiple callbacks per Output but not allow overlapping Inputs across these shared callbacks? I can’t think of any practical reason to have two callbacks with the same Output _and_ the same Input(s)? However, there is a use case for having the _State_ of an element in one callback and the _Input_ in another callback, both with the same Output.

---

<div class="post-metadata">

**Author:** ![AntonB](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@AntonB](https://community.plotly.com/u/AntonB)\
**Post date:** [January 5, 2018, 3:20pm UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/14 "2018-01-05T15:20:20Z")

</div>

I am too having lots of headache with this limitation. Example:  
a table with actions on the table - copy, delete, subscribe, unsubscribe.

the simplest would be to register a callback for each button, perform necessary action and then output rows into table.

but you cant do it because after each button was clicked once you dont know which one was clicked anymore unless you create some really weird state control either via hidden divs (and more callbacks) or managing that state per use session (which is complicated, unreliable or requires some sort of additional services like redis or similar).

all is needed to specify a caller component (i.e. which input) triggered callback  
OR  
being able to setup multiple callbacks for the same output

or am i missing something?

any advice will be greatly appreciated!

---

<div class="post-metadata">

**Author:** ![AntonB](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@AntonB](https://community.plotly.com/u/AntonB)\
**Post date:** [January 5, 2018, 5:55pm UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/15 "2018-01-05T17:55:26Z")

</div>

UPDATE  
i decided that i am spending too much time on workaround and went to the source 🙂  
it does appear that adding anything that would indicate source of the change is a big change. so i opted out for introducing n\_clicks\_previous property in the Button component.

for this I modified the generator scripts at dash-html-components/scripts/generate-components.js with 3 lines of code:  
add new property n\_clicks\_previous in the declaration,  
set it to 0 in the default props  
and set it to n\_clicks after event gets fired in the onClick handler:

```auto
onClick={() => {
        if (props.setProps) props.setProps({n_clicks: props.n_clicks + 1});
        if (props.fireEvent) props.fireEvent({event: 'click'});
        if (props.setProps) props.setProps({n_clicks_previous: props.n_clicks + 1});
}}
```

then run rest of the instructions to build and install locally.  
that did the trick and I can now determine which of the buttons clicked based on whether their previous value is the same as current. interestingly, i have to use n\_clicks\_previous = n\_clicks + 1 due to some reason which i dont entirely comprehend. using n\_clicks\_previous = n\_clicks gives difference of 2 for clicked button and 1 for those that are not clicked.

it works for me for now! 😄

---

<div class="post-metadata">

**Author:** ![gennadyi](https://avatars.discourse-cdn.com/v4/letter/g/2bfe46/32.png) [@gennadyi](https://community.plotly.com/u/gennadyi)\
**Post date:** [January 5, 2018, 8:53pm UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/16 "2018-01-05T20:53:52Z")

</div>

This is clever way to make it work for buttons or things with n\_clicks.

I’ll add my vote too that it would be nice to have incorporated into Dash – something easy like this for buttons, or if there is a general and whatever better other way, to know which of the multiple inputs have changed to cause a particular callback. I want to a parameter which is a list of which inputs changed, upon call to callback, so the callback can be aware of what reason or event its being called for exactly.

Right now have to use hidden divs and timestamps. Its kinda works ok but a little messy with all the extra code to keep track of and imprecise.

---

<div class="post-metadata">

**Author:** ![mikesmith1611](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mikesmith1611/32/2130_2.png) [@mikesmith1611](https://community.plotly.com/u/mikesmith1611)\
**Post date:** [January 8, 2018, 10:53am UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/17 "2018-01-08T10:53:17Z")

</div>

Are you able to create a branch of dash\_html\_components and make a pull request? Maybe we can get this merged with the master branch for everyone to use. This adds a lot of functionality without changing the core dash library. Any thoughts @chriddyp ?

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [January 8, 2018, 6:15pm UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/18 "2018-01-08T18:15:05Z")

</div>

> [@mikesmith1611](#):
>
> This adds a lot of functionality without changing the core dash library

Great idea @mikesmith1611 , I like this as an interim solution 👍. I’d accept a PR that added this functionality.

---

<div class="post-metadata">

**Author:** ![mikesmith1611](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mikesmith1611/32/2130_2.png) [@mikesmith1611](https://community.plotly.com/u/mikesmith1611)\
**Post date:** [January 8, 2018, 8:37pm UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/20 "2018-01-08T20:37:02Z")

</div>

I can’t seem to get this to work. I’m new to npm, and javascript so probably doing something wrong. The button seems to have the property n\_clicks\_previous but it doesn’t update on click ☹ any advice? Also nothing is changing in the lib/ folder when I run npm run install-local, I’m not sure that this is why I’m having issues??

---

<div class="post-metadata">

**Author:** ![AntonB](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@AntonB](https://community.plotly.com/u/AntonB)\
**Post date:** [January 8, 2018, 9:16pm UTC](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788/21 "2018-01-08T21:16:05Z")

</div>

Mike,

change needs to be in 3 places of the generate-components.js script:

line 60:

```auto
    'n_clicks': PropTypes.integer,
    'n_clicks_previous': PropTypes.integer,
```

line 104:

```auto
                onClick={() => {
                    if (props.setProps) props.setProps({n_clicks: props.n_clicks + 1});
                    if (props.fireEvent) props.fireEvent({event: 'click'});
		    if (props.setProps) props.setProps({n_clicks_previous: props.n_clicks + 1});
                }}
```

line 124:

```auto
    n_clicks: 0,
    n_clicks_previous: 0
```

3rd one is actually not that important.

after that run:  
npm install  
see that is completes without errors. I would build it on linux box as some commands do not work on windows  
this will create a dash\_html\_components-0.8.0-py2.7.egg in the /dash-html-components/dist folder  
you will then need to install it locally using  
python -m easy\_install dash\_html\_components-0.8.0-py2.7.egg.

i can share the egg file if you want (i.e. it is already precompiled and all you need to do is just do the python easy\_install step)

Because the change is done at the generate-components.js level, it means that all dash-html components that have n\_click property will have n\_clicks\_previous. that includes links, html.H1/2/3/4/5/6 and many many more. comes very handy!

[Next page](https://community.plotly.com/t/input-two-or-more-button-how-to-tell-which-button-is-pressed/5788.md?page=2)