jQuery Get Data Text, Id, Attribute Value By Example

In jQuery – How to get and set data-attribute, data attribute id, data-attribute text etc. jQuery provide various methods for manipulating the HTML elements. In this jquery tutorial, you will learn two ways to get data-id, data-attribute, data-text etc.

How we can set the data attribute values using the attr() and data() jquery methods? We have also demostrate about the jquery set data attribute below.

jQuery Get Data Attribute Method

jQuery offers various method to get data attribute values, Here You can learn two simple method to get data-any attribute of selected html Elements.

Here you can see that 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 data() method

This example will demostrate you how get data attribute values like data-id, data-text or any other data attribute using jquery data() attribute method from selected html elements.

<!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 &amp; 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>                            

Output

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 attr() method

This jquery attr() method example will demostrate you how get data attribute values like data-id, data-text or any other data attribute using jquery attr() attribute method 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>                            

Output

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.

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

Set attribute values

How to set the data attribute values using the jquery data() & attr() method?
Syntax data() for set the attribute value
$('selector').data('myval',200); // using this syntax for set data attribute value
Syntax attr() for set the attribute value
$('selector').attr('data-myval',200); // using this syntax for set data attribute value

Difference between jQuery attr () and data () method

Main diffrence between this methods are jQuery attr() method return the string and the data() method is return the number. Below the short demostration example of this two method are :

$("selector").attr("data-id") // it will return the string "123"
$("selector").data("id") // it will return the number 123

Be First to Comment

Leave a Reply

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