This tutorial shows how to get the attribute value of a clicked item with jQuery, any attribute which is added in that HTML tag (id, class, name, title, src, etc.).
- To get the attribute value of an element with jQuery, it is used attr() function.
Syntax:

$(element).attr('attribute_name')
    - If the "attribute_name" not exists in "element", the attr() function will return "undefined".

To reffer to the clicked element, you use the $(this) instruction, so, the syntax to get the value of an attribute of a clicked HTML element is:
$(element).click(function(){
  var attrval = $(this).attr('attribute_name');
});
Now, here's some code, and examples.

Get attribute value of an element by Class

In this case, the HTML element is selected by "class".
    • Get the ID:
$('.class').click(function(){
  var id = $(this).attr('id');
});

    • Get the "title" (for example, of an anchor <a> with specified class):
$('.class').click(function(){
  var title = $(this).attr('title');
});

    • Get the "name" (for example, of a form element with specified class):
$('.class').click(function(){
  var name = $(this).attr('name');
});

Example, get the ID and SRC address of a clicked image with class="imgs":
Click on this image:
<img src="imgs/webcourses.gif" alt="Courses: coursesweb.net" class="imgs" id="the_id" width="180" height="60" />
<script type="text/javascript"><!--
$(document).ready(function() {
  $('.imgs').click(function(){
    var idimg = $(this).attr('id');
    var srcimg = $(this).attr('src');
    alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
  });
});
--></script>
Demo:
Click on this image: Courses: coursesweb.net

Get attribute value of an element by ID

In this case, the HTML element is selected by "id".
    • Get the "class":
$('#id').click(function(){
  var class = $(this).attr('class');
});

    • Get the "name" (for example, of a form element with specified "id"):
$('#id').click(function(){
  var name = $(this).attr('name');
});

Example, get the "class" and "alt" attributes of a clicked image with id="idimg":
Click on this image:
<img src="imgs/webcourses.gif" alt="Courses: coursesweb.net" class="clsimg" id="idimg" width="180" height="60" />
<script type="text/javascript"><!--
$(document).ready(function() {
  $('#idimg').click(function(){
    var classimg = $(this).attr('class');
    var altimg = $(this).attr('alt');
    alert('Class: '+ classimg+ '\n Alt: '+ altimg);
  });
});
--></script>
Demo:
Click on this image: Courses: coursesweb.net

Get attribute value of an item selected by Tag-Name

If you want to get the value of an attribute of a clicked item which is selected by Tag Name, you can use these codes:
    • Get the ID of clicked DIV:
$('div').click(function(){
  var id = $(this).attr('id');
});

    • Get the "class" of clicked paragraph (<p>):
$('p').click(function(){
  var class = $(this).attr('class');
});

    • Get the "name" of "input" field:
$('input').click(function(){
  var name = $(this).attr('name');
});

Example, get the "id" and "class" attributes of any clicked DIV:
<div id="idiv" class="clsdiv">Click on this text:<br/>
Free Web Programming Courses - https://coursesweb.net/</div>
<script type="text/javascript"><!--
$(document).ready(function() {
  $('div').click(function(){
    var idd = $(this).attr('id');
    var classdiv = $(this).attr('class');
    alert('ID is: '+ idd+ '\n Class: '+ classdiv);
  });
});
--></script>
Demo:
Click on this text:
Free Web Programming Courses - https://coursesweb.net/

- You can get the value of other attributes too, like "alt", "src" (in <img>), or "rel".

• To get the value of an attribute of any clicked item, use '*' as selector.
      Example, get the ID of any clicked element:
$('*').click(function(){
  var id = $(this).attr('id');
});

• In the same way you can get the attributes value of HTML items on other events, like: mouseover(), focus() .

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
Get Attribute (ID, Class, Name, Title, Src) with jQuery

Last accessed pages

  1. Redirects (2124)
  2. querySelector and querySelectorAll (15468)
  3. Read Excel file data in PHP - PhpExcelReader (76749)
  4. SHA256 Encrypt hash in JavaScript (12819)
  5. Add Text in Canvas from Input text field, as it is Typed (7021)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (281)
  2. Register and show online users and visitors (176)
  3. Read Excel file data in PHP - PhpExcelReader (157)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (155)
  5. JavaScript Course - Free lessons (128)