Find Id of clicked button

Question

I wanted to get the id of clicked button since i have 4-5 buttons on my form.

    <button type="submit" style="height: 30px" id="btnHelp" name="btnHelp" onclick="ShowHelp(2);return false;">Help</button>

    <button type="button" style="height: 30px" id="btnClose" name="btnClose" onclick="Close();return false;">Close</button>

    <button type="button" style="height: 30px" id="btnSave" name="btnSave" onclick="Save();return false;">Close</button>

...............................

Whichever may be the button click, I just want to get id of that button.

$(function () {

        var id = $(this).attr('id');

        alert(id);
})

Also with

$("input").click(function (event) {
        var urlid = $(this).attr('id')
        alert(urlid);
    })

but i am getting the alert as undefined.

How can i get id of button clicked?

Please help me.

try to remove onclick function from button – Mohit Gupta Apr 24 '14 at 07:14 — Mohit Gupta, Apr 24 '14 at 07:14

Tushar Gupta - curioustushar · Accepted Answer · 2014-04-24T07:19:59.910

7

Try

:button Selector

Selects all button elements and elements of type button.

$(":button").click(function (event) {
    var urlid = this.id;
    alert(urlid);
});

Fiddle Demo

Problem

$("input") --> selects elements with tag input eg. <input type="text"/> but not <button> tag .

edited Apr 24 '14 at 07:19

answered Apr 24 '14 at 07:12

Tushar Gupta - curioustushar

58,085
24
103
107

1

@AngryTiger change your selector to `:button` – Tushar Gupta - curioustushar Apr 24 '14 at 07:13

Ehsan Sajjad · Answer 2 · 2014-04-24T07:26:14.143

2

very simply:

$("input").click(function (event) {
        var urlid = this.id;
        alert(urlid);
    })

for button:

  $("button").click(function (event) {
            var urlid = this.id;
            alert(urlid);
        })

edited Apr 24 '14 at 07:26

answered Apr 24 '14 at 07:12

Ehsan Sajjad

61,834
16
105
160

Thomas Urban · Answer 3 · 2014-04-24T07:28:51.017

You might try use event passed as argument into any event handler instead of this for event.target is referring to element actually triggering your handler (being clicked) and event.delegateTarget being element handler has been attached to initially. In both cases you might have to use $() for using jQuery or simply stick with accessing .id in either case.

In your case this would be

$("input").click(function (event) {
    var urlid = $(event.delegateTarget).attr('id');
    alert(urlid);
});

to ensure handler is always accessing that it has been attached to, here.

Except for this quite simple scenario relying on this is sometimes trickier than using provided arguments.

EDIT : However, your case seems to be related to issues encountered by Tusha Gupta, for sure. Your buttons aren't "inputs" so that handlers are never attached, actually.

score 2 · Answer 4 · answered Apr 24 '14 at 07:15

2

I'd try to replace this with the event triggerer.

var urlid = $(event.target).attr("id");

Also, probably your onclick function is preventing your script to be executed, because it's handling the click event, not letting your function do it.

answered Apr 24 '14 at 07:15

Vereos

503
4
15

score 2 · Answer 5 · answered Apr 24 '14 at 07:19

2

I ditched the onclick attributes of buttons you have, and hooked click events to button rather than input, and it worked. So check whether you are connecting to the right element. See example here.

answered Apr 24 '14 at 07:19

alemikh

31
4

score 2 · Answer 6 · answered Apr 24 '14 at 07:23

2

<script>
jQuery(":button").click(function (event) {
        var urlid = $(this).attr('id')
        alert(urlid);
    })
</script>

Try this its work

answered Apr 24 '14 at 07:23

Mohit Gupta

727
2
7
21

score 1 · Answer 7 · answered Apr 24 '14 at 07:17

1

$(function () {

       $("button").click(function () {

        alert($(this).attr("id"));
    });
});

answered Apr 24 '14 at 07:17

Tuhin

3,335
2
16
27

Find Id of clicked button

7 Answers7

Linked