jQuery Get Data Id, Text Attribute Value

jQuery get data attribute value or data id, text attribute value; In this tutorial, i am going to show you how to get the data-id, text, attribute value of an element using jQuery.

jQuery Get Data id, Text, Attribute Value

There are two type of get data attribute methods are:-

  • .data(‘attribute’) method
  • .attr(‘attribute full name’) method

.data(‘attribute’) method

Using the jQuery data() method to find the data-text, data-id or any attribute of an HTML element.

Syntax of data() method

Using the syntax Get data-id and other attribute

$("selector").data("id");

You can use this jquery data() syntax for get data-id attribute value.

$("selector").data("textval");

You can use this jquery data() syntax for get data-textval attribute value.

Example for jQuery Get Data id, Text, Attribute Value using .Data() Method

See the following example for get data text, id attribute value; as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to Get data-id and other attribute using jQuery</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
    $(document).ready(function() {
        $(".getDataId").click(function(){            
            var id = $('#getId').data("id");
            var text = $('#getText').data("textval");
            
            alert('Your id is =' + id);
            alert('Your text value is =' + text);
        });
    });
</script> 
</head>
<body>
    <h3 style="margin-bottom: 10px">Below this checkbox & input box are disabled</h3>
    <p><input type="text" id="getId" data-id="100" value="5000"></p>
    <p><input type="text" id="getText" data-textval="Hello world" value="Hello world"></p>
    <p><b>Note:</b> Click the below buttons and get Data id and text.</p> 
    <button type="button" class="getDataId">Click Me!</button>
</body>
</html>                            

Demo for jQuery Get Data id, Text, Attribute Value using .Data() Method

How to Get data-id and other attribute

Below this checkbox & input box are disabled

Note: Click the below buttons and get Data id and text.

In the above data() method example, When you click on button after that open a popup box with data-id and data-text attribute values.

.attr(‘attribute’) method

Using the jQuery attr() method to find the data-text, data-id or any attribute of an HTML element.

Syntax of attr() method

Using attr() method syntax Get data-id and other attribute

$("selector").attr("data-id");

You can use this jquery attr() syntax for get data-id attribute value.

$("selector").data("data-textval");

You can use this jquery attr() syntax for get data-textval attribute value.

Example for jQuery Get Data id, Text, Attribute Value using .attr() Method

See the folloiwng example for how get data attribute values like data-id, data-text or any other data attribute using jquery attr() attribute method with onclick from selected html elements:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to Get data-id Attribute</title>
<title>How to Get data-id and other attribute using jQuery</title>
<script type="text/javascript">
    $(document).ready(function() {
        $(".data_attr").click(function(){            
            var id = $('#attrId').attr("data-id");
            var text = $('#attrText').attr("data-textval");
            
            alert('Your id is =' + id);
            alert('Your text value is =' + text);
        });
    });
</script> 
</head>
<body>
    <h3 style="margin-bottom: 10px">This is example of attr() method</h3>
    <p><input type="text" id="attrId" data-id="100" value="5000"></p>
    <p><input type="text" id="attrText" data-textval="Hello world" value="Hello world"></p>
    <p><b>Note:</b> Click the below buttons and get Data id and text.</p> 
    <button type="button" class="data_attr">Click Me!</button>
</body>
</html>                            

Demo for jQuery Get Data id, Text, Attribute Value using .attr() Method

How to Get data-id and other attribute

This is example of attr() method

Note: Click the below buttons and get Data id and text.

When you click on button after that open a popup box with data-id and data-text attribute values.

Recommended jQuery Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *