Accessing HTML data attribute on-click via .data() doesn't work

Question

On click of one of the options I am trying to get the data value from the 'ul li a' and place it into button below, I've set up a JS fiddle example here:

https://jsfiddle.net/q5j8z/4/

But cant seem to get it working

$('ul li a').click(function(e) {
    e.preventDefault();
    var value = $(this).data();
    $('.button').data('value');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<ul>
    <li><a data-value="50" href="#">Option 1</a></li>
    <li><a data-value="40" href="#">Option 2</a></li>
    <li><a data-value="10" href="#">Option 3</a></li>
</ul>

<a data-value="" class="button" href="">Go</a>

Does anyone have any ideas please?

see this modified fiddle jsfiddle.net/q5j8z/16

Rinku
– Rinku

2013-06-05 09:35:18 +00:00
Commented Jun 5, 2013 at 9:35 — Rinku
– Rinku, Commented Jun 5, 2013 at 9:35

palaѕн · Accepted Answer · 2013-11-11 19:17:15Z

16

You can do this:

$('ul li a').click(function (e) {
    e.preventDefault();
    var value = $(this).data('value');
    $('.button').data('value', value);
    console.log($('.button').data('value'));
});

Here, $(this).data('value') is used to get the data attribute value of the link.

and $('.button').data('value', value) is used to set the data attribute value of the button.

Using, console.log($('.button').data('value')); you can check the console the data value being set.

FIDDLE DEMO

For more info:- .data() API Documentation

edited Nov 11, 2013 at 19:17

answered Jun 5, 2013 at 9:25

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A. Wolff · Accepted Answer · 2013-06-05 09:33:17Z

2

Use it like this:

var value = $(this).data('value');

And then:

$('.button').data('value', value);

edited Jun 5, 2013 at 9:33

answered Jun 5, 2013 at 9:25

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Comments

thomas · Accepted Answer · 2013-06-05 09:27:13Z

1

You are not assigning the value data to the button actually. Try this:

$('ul li a').click(function(e) {
    e.preventDefault();

    var value = $(this).data();

    // assign the value form the clicked anchor to button value data
    $('.button').data('value', value);

    console.log($('.button').data('value'));
});

answered Jun 5, 2013 at 9:27

thomas

2,5881 gold badge22 silver badges29 bronze badges

Comments

Alessandro Minoccheri · Accepted Answer · 2013-06-05 09:34:19Z

1

Try this:

$('ul li a').click(function(e) {
        e.preventDefault();

        var value = $(this).data('value');

        $('.button').data('value', value);
    });

You can see the value of the button with console.log into your console with:

console.log('data: '+$(".button").data("value"));

edited Jun 5, 2013 at 9:34

answered Jun 5, 2013 at 9:25

Alessandro Minoccheri

36.1k22 gold badges128 silver badges176 bronze badges

Comments

Ted · Accepted Answer · 2013-06-05 09:29:35Z

0

First off you are are you trying to insert the value of variable value or 'value' literal?

data() is meant to be used similarily to attr('attr-name', attr_value) like below:

$('ul li a').click(function(e) {
    e.preventDefault();  
    var value = $(this).data('value');
    $('.button').data('value', value);
});

The above works in your fiddle.

answered Jun 5, 2013 at 9:29

Ted

4,0671 gold badge23 silver badges35 bronze badges

Comments

TylerH · Accepted Answer · 2023-03-14 20:52:42Z

0

You don't need to specify a data- prefix because jQuery does that automatically.

So ensure you are using the right attribute for the value, as below:

$('ul li a').click(function(e) {
    e.preventDefault();
    var value = $(this).data('value');
    $('.button').data('value', value);
});

edited Mar 14, 2023 at 20:52

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Dec 10, 2014 at 10:05

Emeka Mbah

17.7k11 gold badges84 silver badges104 bronze badges

Collectives™ on Stack Overflow

Accessing HTML data attribute on-click via .data() doesn't work

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related