In this tutorial we will learn how to Get the id of button with jQuery. For this we can use jQuery attr() method and click() method to get the id or value of id of a button tag.
Table of Contents
jQuery attr() method
jQuery attr() method sets or returns the attributes and values of selected HTML element or tag.
In this example attr() method is used to get the id of button.
jQuery click() method
jQuery click() method triggers the click event or it attaches the function execution with the click event of HTML element.
In this example click() method is used to execute a function which will get the id.
HTML Code
HTML Code is given below, in this code we have a button tag with defined id.
<!DOCTYPE html>
<html>
<head>
<title>Get id of clicked Button with jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<button class='button' id='btn'>Get id</button>
<script src="script.js"></script>
</body>
</html>
JQuery Code
JQuery Code is given below, jQuery click() method will trigger a function.
Inside this function attr() method is used to get the value of id attribute.
$('.button') is a class selector used to select the button tag.
$(this) refers to the clicked button whose id will be displayed.
This example will return the id of button which is clicked.
<script>
$(document).ready(function(){
$('.button').click(function(){
var id = $(this).attr('id');
alert(id);
});
});
</script>
Following code can be used to get the id of button on click of another button.
<!DOCTYPE html>
<html>
<head>
<title>Get id of Button with jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<button class='button' id='button1'>Button 1</button>
<button id='btn'>Get id of Button 1</button>
<script>
$(document).ready(function(){
$('#btn').click(function(){
// Using Class Selector to Get Id.
var id = $('.button').attr('id');
alert(id);
});
});
</script>
</body>
</html>
Demo
Video Tutorial
Watch video tutorial on How To Get Button id in jQuery.