[g37752]

i have a table, and each row of the table contains a "process" button and a "cancel" button.
when a button is clicked, i want to update a database and come back to the form without the processed row.

HTML table:

<tr id="row1"><td>...</td><td>(button id="process1")</td><td>(button id="cancel1")</td></tr>
<tr id="row2"><td>...</td><td>(button id="process2")</td><td>(button id="cancel2")</td></tr>
......

How do I get the id of the button clicked? so I can parse the id, and determine which row to send to the database?

	$(document).ready(function(){
	    $("[id^=process]").click(function(){
	        ???
	        $.post("process.php",function(data){})
	    });
	    $("[id^=cancel]").click(function(){
	        ???
	        $.post("cancel.php",function(data){})
	    });
	})

[laytonsdad]

try using classes to select the button and the id of the row to change.

[g37752]

can you show me a simple example? i am not sure what you mean..

[JackOfAllTrades]

When you're inside a handler like this, $(this) is the object that triggered the handler.

Moved to jQuery.

[g37752]

clicked=this.id;
$("#row"+strcnt).hide();

[BobRodes]

You can just do this:

$('button').on('click', function(event) {
    alert(event.target.id);
})

Of course, instead of the alert you would put your code to post to the DB. But the alert demonstrates that you have the id.

This post has been edited by BobRodes: 07 November 2012 - 09:17 PM

[Dormilich]

@Bob: event.target.id only works as intended, if there are no more elements (e.g. <img>, <span>) inside the <button> element. otherwise it would fetch their ID if the click happened inside them. it would work unconditionally with event.currentTarget.id, where supported.

PS. that behaviour can be used for instance in tables, where you define one single event handler on the <table> but have access to the clicked <td> via Event.target.

[SpAm101]

Dormilich, on 27 November 2012 - 03:23 PM, said:

@Bob: event.target.id only works as intended, if there are no more elements (e.g. <img>, <span>) inside the <button> element. otherwise it would fetch their ID if the click happened inside them. it would work unconditionally with event.currentTarget.id, where supported.

PS. that behaviour can be used for instance in tables, where you define one single event handler on the <table> but have access to the clicked <td> via Event.target.

Exactly. Although you may get some issues with IE and this property. If you are wanting to use JQuery, then it's as JackOfAllTrades said:

Quote

When you're inside a handler like this, $(this) is the object that triggered the handler.

As such, doing this:

$(this).attr('id')

Will do the same as

event.currentTarget.id

[Dormilich]

may I propose the near obvious variant?

this.id

[BobRodes]

Dormilich, on 27 November 2012 - 04:23 PM, said:

@Bob: event.target.id only works as intended, if there are no more elements (e.g. <img>, <span>) inside the <button> element. otherwise it would fetch their ID if the click happened inside them. it would work unconditionally with event.currentTarget.id, where supported.

PS. that behaviour can be used for instance in tables, where you define one single event handler on the <table> but have access to the clicked <td> via Event.target.

Very interesting. I didn't think about that, since I haven't messed with any buttons with stuff in them. So, if a user clicks a contained element, "this" will still reference the element that is in the selector, i. e. the button element in the case you mention?

This post has been edited by BobRodes: 01 December 2012 - 07:35 PM

[Dormilich]

yepp, this refers to Event.currentTarget (unless it is bound otherwise), i.e. the button.

[BobRodes]

Good to know the distinction. Thanks Dormlich.

[Dormilich]

sure, no problem.