Select the value tag of the element selected by class

Question

I have a page that has a whole bunch of buttons

<button value=<?php val?> class='hot' >Hot</button>

and Im selecting them by class because the values will all be different. Im trying to have them, on click, alert the value, but I can't figure out how to access the value field.

My function is

$(".hot").click(function() {
});

and I tried to access it(after much time spent googling) using:

$(this).find('option:selected').attr('value');

resulting in

$(".hot").click(function() {
     $(this).find('option:selected').attr('value');
});

however, when I alert that, it just says undefined.

And ideas would be awesome! Im pretty familiar with php, but javascript and JQuery are pretty new to me, so links and good explanations are really appreciated, not just an answer. Thanks!

score 5 · Accepted Answer · edited May 23 '17 at 10:26

5

Use .val():

$(".hot").click(function() {
   var valueOfButton = $(this).val();
});

Please also see this other SO question for the difference between .val() and .attr('value'): What's the difference between jQuery .val() and .attr('value')?

edited May 23 '17 at 10:26

Community

1
1

answered Oct 12 '12 at 19:17

Laurence

1,673
11
16

This works, so great! However, what would I do if I wanted a different elemetn in it? Like ad id or href? Just for future reference. – samuraiseoul Oct 12 '12 at 19:21
You can use `$("#blah")` for id, and `$("[href]")` for element attributes. I recommend the very helpful jQuery documentation :) http://docs.jquery.com/ – Laurence Oct 12 '12 at 19:23
But would that get the id of the currently clicked class? – samuraiseoul Oct 12 '12 at 19:23
2

@Samuraisoulification you want to know about [jQuery.attr](http://api.jquery.com/attr/). – moonwave99 Oct 12 '12 at 19:24
1

You could use what @moonwave99 has and call `.attr('id')`. – Laurence Oct 12 '12 at 19:27

score 1 · Answer 2 · answered Oct 12 '12 at 19:17

1

You just need:

$(".hot").click(function(e) {
   alert( $(this).attr('value') );
});

answered Oct 12 '12 at 19:17

moonwave99

21,957
3
43
64

Ghostly downwoters are ghostly. – moonwave99 Oct 12 '12 at 19:21

score 1 · Answer 3 · answered Oct 12 '12 at 19:19

1

Try This one...It will alert the value of button which was clicked...

$(".hot").click(function() {
alert($(this).val());
});

answered Oct 12 '12 at 19:19

Ankush Jain

5,654
4
32
57

Select the value tag of the element selected by class

3 Answers3