jQuery Get Data Text, Id, Attribute Value Example

jQuery Get Data Text, Id, Attribute Value Example

jQuery get data, and text attribute value by id, name, and class from an element; In this tutorial, you will learn how to get and set data-attribute, data attribute id, data-attribute text, etc using jQuery .attr() and .data() method.

jQuery provides various methods for manipulating HTML elements. In this jquery tutorial, you will learn two ways to get data-id, data-attribute, data-text, etc. And how to set the data attribute values using the jQuery attr() and data() methods.

jQuery Get Data Attribute Method

jQuery offers various methods to get data attribute values. Now, You can learn two simple methods to get the data-any attributes of selected HTML Elements.

Here you can see that two types 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 attributes

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

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

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

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

Example for jQuery data() method

This example will demonstrate to you how get data attribute values like data-id, data-class, 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 & 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 demonstrate to you how to get data attribute values like data-id, data-text data-class 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

Recommended jQuery Tutorials

  1. jQuery | Event MouseUp By Example
  2. Jquery Click Event Method with E.g.
  3. Event jQuery. Blur By Example
  4. jQuery form submit event with example
  5. keydown function jQuery
  6. List of jQuery Events Handling Methods with examples
  7. Jquery Selector by .class | name | #id | Elements
  8. How to Get the Current Page URL in jQuery
  9. jQuery Ajax Get() Method Example
  10. get radio button checked value jquery by id, name, class
  11. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  12. Set data attribute value jquery
  13. select multiple class in jquery
  14. How to Remove Attribute Of Html Elements In jQuery
  15. How to Checked Unchecked Checkbox Using jQuery
  16. jQuery removeClass & addClass On Button Click By E.g.
  17. To Remove whitespace From String using jQuery
  18. jQuery Ajax Post Method Example
  19. jQuery Ajax Get Method Example
  20. To Load/Render html Page in div Using jQuery Ajax $.load
  21. jQuery Sibling Methods – To Find Siblings Elements
  22. jQuery Find Siblings Elements with Class, id

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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