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
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
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.