jQuery Get Data Attribute Value
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Amruta
In this article we will show you the solution of jQuery get data attribute value, the .data() method enables us to securely attach any type of data to DOM components without worrying about memory leaks or circular references.
jQuery's data() methods are used to collect and set data-attributes from elements, including id, text, and values by class, name, and id.
finding the data-text, data-id, or any other attribute of an HTML element with the jQuery data() method.
The jquery attr() method examples will show you how to retrieve data attribute values such as data-id, data-text, or another data attribute using the jquery attr() attribute method of chosen html elements.
We have the option of using custom element attributes in addition to attributes.
This tutorial will teach you how to use jQuery to retrieve the value of a custom attribute inside an HTML element.
Step By Step Guide On jQuery Get Data Attribute Value :-
<!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>
- The first step is to write <HTML>, which tells the browser what version of HTML we're using. A tag is the first element of an HTML document.
- Use the <head> tag to describe the project's heading. In contrast to the final brackets, which are closed, the title and final brackets both are open.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used. We create alert function in script.
- The script is then closed and head closed.
- The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
- Then we create an input text value.
- Then we create a button using the data id.
- After that we close </body></html>
Conclusion :-
jQuery offers a number of ways to manipulate HTML elements. You will learn two techniques to obtain data-id, data-attribute, data-text, etc.
jQuery's attr() and data() methods are used to set its data attribute values. jQuery provides a number of ways to retrieve data attribute values.
You can now learn two straightforward methods for obtaining data for a specified html attribute.
I hope this article on jQuery get data attribute value helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
