CODEWITHSUNDEEP
javascriptjqueryhtml
C Sharper
C Sharper

Reputation: 8646

Find Id of clicked button

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.

Upvotes: 0

Views: 424

Answers (7)

Thomas Urban
Thomas Urban

Reputation: 5071

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.

Upvotes: 2

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62498

very simply:

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

for button:

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

Upvotes: 2

Mohit Gupta
Mohit Gupta

Reputation: 727

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

Try this its work

Upvotes: 2

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

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 .

Upvotes: 7

alemikh
alemikh

Reputation: 31

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.

Upvotes: 2

Tuhin
Tuhin

Reputation: 3373

$(function () {

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

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

Upvotes: 1

Vereos
Vereos

Reputation: 513

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.

Upvotes: 2

Related Questions