12 Replies - 10082 Views - Last Post: 02 December 2012 - 02:14 PM

#1 g37752  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 195
  • Joined: 24-July 12

jQuery - how to get id of element clicked?

Posted 31 October 2012 - 07:50 PM

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){})
	    });
	})


Is This A Good Question/Topic? 0
  • +

Replies To: jQuery - how to get id of element clicked?

#2 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 436
  • View blog
  • Posts: 1,842
  • Joined: 30-April 10

Re: jQuery - how to get id of element clicked?

Posted 31 October 2012 - 09:02 PM

try using classes to select the button and the id of the row to change.
Was This Post Helpful? 0
  • +
  • -

#3 g37752  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 195
  • Joined: 24-July 12

Re: jQuery - how to get id of element clicked?

Posted 31 October 2012 - 09:48 PM

can you show me a simple example? i am not sure what you mean..
Was This Post Helpful? 0
  • +
  • -

#4 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6052
  • View blog
  • Posts: 23,487
  • Joined: 23-August 08

Re: jQuery - how to get id of element clicked?

Posted 01 November 2012 - 02:52 AM

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

Moved to jQuery.
Was This Post Helpful? 0
  • +
  • -

#5 g37752  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 195
  • Joined: 24-July 12

Re: jQuery - how to get id of element clicked?

Posted 01 November 2012 - 03:20 PM

clicked=this.id;
$("#row"+strcnt).hide();
Was This Post Helpful? 0
  • +
  • -

#6 BobRodes  Icon User is offline

  • Your Friendly Local Curmudgeon
  • member icon

Reputation: 574
  • View blog
  • Posts: 2,989
  • Joined: 19-May 09

Re: jQuery - how to get id of element clicked?

Posted 07 November 2012 - 09:15 PM

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

Was This Post Helpful? 0
  • +
  • -

#7 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,143
  • Joined: 08-June 10

Re: jQuery - how to get id of element clicked?

Posted 27 November 2012 - 03:23 PM

@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.
Was This Post Helpful? 1
  • +
  • -

#8 SpAm101  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 54
  • Joined: 28-November 12

Re: jQuery - how to get id of element clicked?

Posted 28 November 2012 - 10:08 AM

View PostDormilich, 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

Was This Post Helpful? 0
  • +
  • -

#9 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,143
  • Joined: 08-June 10

Re: jQuery - how to get id of element clicked?

Posted 28 November 2012 - 01:08 PM

may I propose the near obvious variant?
this.id

Was This Post Helpful? 0
  • +
  • -

#10 BobRodes  Icon User is offline

  • Your Friendly Local Curmudgeon
  • member icon

Reputation: 574
  • View blog
  • Posts: 2,989
  • Joined: 19-May 09

Re: jQuery - how to get id of element clicked?

Posted 01 December 2012 - 07:31 PM

View PostDormilich, 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

Was This Post Helpful? 0
  • +
  • -

#11 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,143
  • Joined: 08-June 10

Re: jQuery - how to get id of element clicked?

Posted 02 December 2012 - 02:51 AM

yepp, this refers to Event.currentTarget (unless it is bound otherwise), i.e. the button.
Was This Post Helpful? 0
  • +
  • -

#12 BobRodes  Icon User is offline

  • Your Friendly Local Curmudgeon
  • member icon

Reputation: 574
  • View blog
  • Posts: 2,989
  • Joined: 19-May 09

Re: jQuery - how to get id of element clicked?

Posted 02 December 2012 - 02:12 PM

Good to know the distinction. Thanks Dormlich.
Was This Post Helpful? 0
  • +
  • -

#13 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,143
  • Joined: 08-June 10

Re: jQuery - how to get id of element clicked?

Posted 02 December 2012 - 02:14 PM

sure, no problem.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1