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.

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.

• javascript
• jquery
• html

• 1 try to remove onclick function from button – Mohit Gupta Commented Apr 24, 2014 at 7:14

7 Answers 7

Try

:button Selector

Selects all button elements and elements of type button.

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

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

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.

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.

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

Try this its work

very simply:

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

for button:

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

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.

$(function () {

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

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