Getting data-* attribute for onclick event for an html element

Question

<a id="option1" data-id="10" data-option="21" href="#" onclick="goDoSomething(?,?);">
       Click to do something
</a>

I want to get the data-id and data-option values inside the function goDoSomething(10, 21) I have tried to use this reference: this.data['id'] but it did not work.

How can I do this?

Here's an answer using vanilla JS stackoverflow.com/a/39670335/5049215 — Sia
– Sia, Commented Oct 25, 2019 at 16:24

Krish R · Accepted Answer · 2013-11-17 12:14:18Z

117

You can achieve this $(identifier).data('id') using jquery,

    <script type="text/javascript">

        function goDoSomething(identifier){     
            alert("data-id:"+$(identifier).data('id')+", data-option:"+$(identifier).data('option'));               
        }

    </script>

    <a id="option1" 
       data-id="10" 
       data-option="21" 
       href="#" 
       onclick="goDoSomething(this);">
           Click to do something
    </a>

javascript : You can use getAttribute("attributename") if want to use javascript tag,

    <script type="text/javascript">

        function goDoSomething(d){
            alert(d.getAttribute("data-id"));
        }

    </script>

    <a id="option1" 
       data-id="10" 
       data-option="21" 
       href="#" 
       onclick="goDoSomething(this);">
           Click to do something
    </a>

Or:

    <script type="text/javascript">

        function goDoSomething(data_id, data_option){       

            alert("data-id:"+data_id+", data-option:"+data_option);
        }

    </script>

    <a id="option1" 
       data-id="10" 
       data-option="21" 
       href="#" 
       onclick="goDoSomething(this.getAttribute('data-id'), this.getAttribute('data-option'));">
           Click to do something
    </a>

edited Nov 17, 2013 at 12:14

answered Nov 17, 2013 at 11:41

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

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

2 Comments

Maxime Lorant Over a year ago

As the author put the tag "jQuery", I recommend you to write the method with $(identifier).data('id') ;)

Krish R Over a year ago

Thanks Maxime Lorant, Added the Jquery option also.

CD.. · Accepted Answer · 2013-11-17 11:40:25Z

45

Like this:

$(this).data('id');
$(this).data('option');

Working example: http://jsfiddle.net/zwHUc/

answered Nov 17, 2013 at 11:40

CD..

74.4k25 gold badges160 silver badges170 bronze badges

Comments

Sumner Evans · Accepted Answer · 2015-02-26 02:53:47Z

9

I simply use this jQuery trick:

$("a:focus").attr('data-id');

It gets the focused a element and gets the data-id attribute from it.

edited Feb 26, 2015 at 2:53

Sumner Evans

9,2055 gold badges32 silver badges48 bronze badges

answered Feb 26, 2015 at 2:11

Mobetoh

931 silver badge4 bronze badges

Comments

Wasim Khan · Accepted Answer · 2019-12-14 06:20:11Z

6

Check if the data attribute is present, then do the stuff...

$('body').on('click', '.CLICK_BUTTON_CLASS', function (e) {
                        if(e.target.getAttribute('data-title')) {
                            var careerTitle = $(this).attr('data-title');
                            if (careerTitle.length > 0) $('.careerFormTitle').text(careerTitle);
                        }
                });

answered Dec 14, 2019 at 6:20

Wasim Khan

1,25713 silver badges13 bronze badges

Comments

tripleee · Accepted Answer · 2020-11-18 07:39:48Z

4

function get_attribute(){ alert( $(this).attr("data-id") ); }

Read more at https://www.developerscripts.com/how-get-value-of-data-attribute-in-jquery

edited Nov 18, 2020 at 7:39

tripleee

192k37 gold badges318 silver badges367 bronze badges

answered Nov 18, 2020 at 6:52

Ravi Ameriya

413 bronze badges

Comments

James Kirkby · Accepted Answer · 2013-11-17 11:57:35Z

2

here is an example

 <a class="facultySelecter" data-faculty="ahs" href="#">Arts and Human Sciences</a></li>

    $('.facultySelecter').click(function() {        
    var unhide = $(this).data("faculty");
    });

this would set var unhide as ahs, so use .data("foo") to get the "foo" value of the data-* attribute you're looking to get

edited Nov 17, 2013 at 11:57

answered Nov 17, 2013 at 11:45

James Kirkby

1,8345 gold badges26 silver badges46 bronze badges

1 Comment

joninx Over a year ago

I'd rather $('.facultySelecter').on("click", function() { var unhide = $(this).data("faculty"); });

smdhkv · Accepted Answer · 2022-08-02 17:17:31Z

1

you can directly use anchor id or data-action attributes to trigger the event.

Html Code

<a id="option1" data-action="option1" data-id="10" data-option="21" href="javascript:void(0);" title="Click Here">Click Here</a>

jQuery Code:

$('a#option1').on('click', function(e) {
    e.preventDefault();
    console.log($(this).data('id') + '::' + $(this).data('option')) ;   
});

OR

$('[data-action="option1"]').on('click', function(e) {
    e.preventDefault();
    console.log($(this).data('id') + '::' + $(this).data('option'));    
});

answered Aug 2, 2022 at 17:17

smdhkv

1871 gold badge3 silver badges15 bronze badges

Comments

adam187 · Accepted Answer · 2013-11-17 11:57:50Z

0

User $() to get jQuery object from your link and data() to get your values

<a id="option1" 
   data-id="10" 
   data-option="21" 
   href="#" 
   onclick="goDoSomething($(this).data('id'),$(this).data('option'));">
       Click to do something
</a>

answered Nov 17, 2013 at 11:57

adam187

3,4031 gold badge23 silver badges15 bronze badges

Collectives™ on Stack Overflow

Getting data-* attribute for onclick event for an html element

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related