CODEWITHSUNDEEP
javascriptjquery
Kevin Tabada
Kevin Tabada

Reputation: 25

How to get value on <a> when click

my HTML

<a href="#" class="my_button" value="red">Red: Fire</a>
<a href="#" class="my_button" value="blue">Blue: Water</a>
<a href="#" class="my_button" value="green">Green: Earth</a>

my JS

   $(document).ready(function() {
    $('.my_button').click(function() {
        var code = $(this).val();
        alert(code);
    });
});

how to get the result like when I click Red: Fire it will alert red and etc...

please help me

Upvotes: 0

Views: 77

Answers (8)

Master Slave
Master Slave

Reputation: 28519

You can do

$(this).attr("value");

here's a working fiddle

http://jsfiddle.net/3dvgrbp4/

in a second a lot more similar answers landed, all revolving around the same, pasting a snippet to show a difference between prop vs attr

$(elem).attr('checked')    // returned true (Boolean) prior to 1.6
$(elem).attr('checked')   // now returns "checked" (string) 1.6
$(elem).prop('checked')    // now returns true (Boolean) 1.6

but as others mentioned better to move to data attribute since value is not a valid property for the anchor tag

Upvotes: 0

Michael Humelsine
Michael Humelsine

Reputation: 601

Try using the <button> tag instead. <a> tags do not have a value attribute. I would use the button tag unless you needed it to be a hyperlink. In that case use the data- approach mentioned by su8898. Your class says it's a button, the functionality says it's a button (no location for the href), it should be a button :)

Upvotes: 0

Christos
Christos

Reputation: 53958

You could try this:

$('.my_button').click(function(e) {
    alert($(this).html()));
});

Below, I have a snippet you can run to check it out.

$(function(){
  
    // The binding should happen after 
    // the document is ready.
    $('.my_button').click(function() {
        alert(alert($(this).html()));
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="my_button" value="red">Red: Fire</a>
<a href="#" class="my_button" value="blue">Blue: Water</a>
<a href="#" class="my_button" value="green">Green: Earth</a>

Upvotes: 1

jerald punx
jerald punx

Reputation: 35

$(document).ready(function() {
    $('.my_button').click(function() {
        var code = $(this).attr('data');
        alert(code);
    });
});

Upvotes: 0

Grasper
Grasper

Reputation: 1313

http://jsfiddle.net/kmaqg3cy/

Here is the correct answer:

$(document).ready(function() {
    $('.my_button').click(function() {
        var code = $(this).attr('data');
        alert(code);
    });
});

Upvotes: 1

su8898
su8898

Reputation: 1713

You better use the data attribute.

Try this 

<a href="#" class="my_button" data-value="red">Red: Fire</a>
<a href="#" class="my_button" data-value="blue">Blue: Water</a>
<a href="#" class="my_button" data-value="green">Green: Earth</a>

and in your JS

$(document).ready(function() {
    $('.my_button').click(function() {
    var code = $(this).data('value');
    alert(code);
});

Upvotes: 1

pumpkinzzz
pumpkinzzz

Reputation: 2967

var code = $(this).attr("value");

Upvotes: 0

demo
demo

Reputation: 6235

    $('.my_button').unbind('click').click(function() {
        var code = $(this).attr('value');
        alert(code);
        return false;
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a href="#" class="my_button" value="red">Red: Fire</a>
<a href="#" class="my_button" value="blue">Blue: Water</a>
<a href="#" class="my_button" value="green">Green: Earth</a>

Tag doesn't has value as property but it has value as attribute

Upvotes: 0

Related Questions