How to identify an element using an onclick event handler

Question

I want to send the ID of an element to the function to know what button pressed it.

<input type="submit" id="foo" onclick="function(abcxyz)" value="abc" />
<input type="submit" id="foo" onclick="function(xyz)" value="x" />

function(str){
    if(str == abcxyz){
        //do this.
    }
    else if(str == xyz){
        //do that.
    }
}

or if it's possible, its okay that the value abc or x will be send to the function. so str = abc or str = x.

The rule is, ID of an element should be unique in that page. — KBN, Feb 12 '13 at 18:18
sorry for that, I just copy and paste the input and added new value. my mistake. And yes your right, it must be unique because its an ID. — user2045458, Feb 12 '13 at 18:45

score 1 · Accepted Answer · answered Feb 12 '13 at 18:21

1

If I have understood your problem correctly...

You are missing a function name
The two inputs have the same id
using submit for type doesn't make sense in your case

The values of the inputs aren't needed for this task

<input type="button" id="foo1" onclick="button_click('1')" />
<input type="button" id="foo2" onclick="button_click('2')" />`

function button_click(str){
    if(str == '1'){
        alert('Button with id foo1 was pressed');
    }
    else if(str == '2'){
        alert('Button with id foo2 was pressed');
    }
}

answered Feb 12 '13 at 18:21

alu

759
7
20

This is what i needed. the rest of the answers are useful. Thanks guys, SOF the best.. – user2045458 Feb 12 '13 at 18:32
@user2045458 If you find an answer useful, you should vote it up. – Robin van Baalen Feb 12 '13 at 20:53
1

@alu1024 Maybe it's better to use a `switch` statement in the `button_click` function to be more future proof. Also, you can do `button_click(this.id)` to create more reproducible code. – Robin van Baalen Feb 12 '13 at 20:57

score 0 · Answer 2 · edited May 23 '17 at 12:18

0

You can use the answer that you'll find here.

Basically write

<input type="submit" onclick="yourFunction(this.id)" id="abc" value="Button abc" />

edited May 23 '17 at 12:18

Community

1
1

answered Feb 12 '13 at 18:17

Phil Bozak

2,792
1
19
27

1

ID's cannot be only numeric. – Robin van Baalen Feb 12 '13 at 18:19

score 0 · Answer 3 · answered Feb 12 '13 at 18:17

0

Your function needs a name:

Try:

<script type="text/javascript">
    function whichButton(str){
        if(str == 'abc'){
            alert('abc was clicked');
        }
        else if(str == 'x'){
            alert('str was clicked');
        }
    }
</script>
<input type="submit" id="foo" onclick="whichButton(this.value);" value="abc" />
<input type="submit" id="foo1" onclick="whichButton(this.value);" value="x" />

answered Feb 12 '13 at 18:17

SeanWM

16,789
7
51
83

Oh come on, give them different IDs! – KBN Feb 12 '13 at 18:17
Nice Sean.. how about abcxyz value. like when i will use abc can i compare str == abxyz if its not possible to href then input will be okay. – user2045458 Feb 12 '13 at 18:22
Yes, you can. Just add another `else if` in the function. – SeanWM Feb 12 '13 at 18:31
@Sean I think a `switch` statement would be more appropriate and future proof in this situation. – Robin van Baalen Feb 13 '13 at 15:52

score 0 · Answer 4 · answered Feb 12 '13 at 18:18

As a solution to your problem please refer the code snippet mentioned below

E.g

  <input type="submit" id="foo" onclick="function(this.value)" value="abc" />
  <input type="submit" id="foo" onclick="function(this.value)" value="x" />

In above code snippet this object will refer to event source i.e submit button

How to identify an element using an onclick event handler

4 Answers4