jQuery: Get / set attribute values

This post describes how to get & set element’s attributes. Using jQuery you can get/set any attributes like id, class, style, name, title, etc. on any tag (<div>, <span>, <p>, etc.). This can be done using jQuery's .attr() and .prop() methods. If you are using jQuery version earlier than 1.6, then you have .attr() only.

The two methods are named accordingly to work with element's attributes and properties. The distinguish between them two was introduced in jQuery 1.6. For versions prior to 1.6 you don't need to worry about the difference and use .attr() in all cases. However, if you are working with newer versions of the library, you need to understand the difference between the two. You can read more about the difference between attributes and properties here and here. But before you dive into the details, let's see some examples.

Consider we have the following HTML tags on our page with corresponding attributes:

<div class="myContainer" id="wrapper">
  Some content 
  <a id="siteLink" title="Google" href="">link</a>
  <input type="checkbox" id="mycheckbox" checked="checked" />
</div>

In order to get container's id and the link's title attributes, we would use the following jQuery code:

// Get the ID of the selected div
var divID = $("div.myContainer").attr("id"); // "SiteLink"

// Get title attribute of a link
var linkTitle = $("#siteLink").attr("title"); // "Google"

// Get checkbox's "checked" state
$("#mycheckbox").prop("checked"); // returns boolean "true"
$("#mycheckbox").attr("checked"); // returns string "checked"

To set element’s attributes, you need to add it's value as the second parameter to the function.

// Add title to a link
$("a#siteLink").attr("title", "This is a link");

// Set table cell's collspan attribute
$("td.myDoubleCell").attr("colspan", 2);

// Mark checkbox as checked
$("#mycheckbox").prop("checked", true);

Additional notes

Here are some additional notes related to setting and getting attributes with jQuery that you should know:

  1. In most cases you use would want to use .prop() method. It is programmer friendly. It returns values of the right types which makes your code more readable and easy to understand, whereas .attr() always return string value. For example: .prop("checked") above returned boolean, style properties would return object with style properties that you can work on, etc.

  2. If jQuery selection returns more than one element, .attr()/.prop() functions would change only the first element’s attribute. If you need to change them all, you will have to do it in .each() loop.

    // Assume we have many links on our page
    $('a').prop('target', '_blank'); // Set target of the first link only
    
    // Setting the target of all links in the loop
    $('a').each(function(){
      $(this).prop('target', '_blank');
    });
  3. Finally, you are not limited to W3 Consortium defined set of HTML attributes. You can also set your own attributes with their own values.

    //This code adds myAttr attribute with the value of 10
    $("#container").attr("myAttr", "10");
    
    // Read the value
    $("#container").attr("myAttr");

jQuery Form Reset

This post shows you how to reset HTML form using jQuery. Also, in the notes section below, you will find a list of special cases and things to keep in mind while resetting form.

Please note that this post discusses 2 cases of resetting a form:

  1. Resetting form values to their default/initial values (similar to clicking on form "reset" button);
  2. Clearing form values (clearing form values, no matter what their default values were).

1. Reset form values

Probably, you already tried to use $("your-form").reset() method and got the following error:

TypeError: $(...).reset is not a function

That is because jQuery does not have .reset() method. However, DOM form elements have .reset() method. It resets form values to their initial values. In other words, if we had an input field with value="set on server" attribute set, and then, user typed in some other random text. On reset() that input fields value would be reset to "set on server" again and not to " ".

That out of the way, here is how you can reset a form using "pure" JavaScript.

// JavaScript only syntax
getElementById("your-form-id").reset();

// Using jQuery selectors
$('.my-form-class')[0].reset();

Here is a better way to reset your form with jQuery. Simply trigger a reset event on your form.

// jQuery syntax
$('.my-form-class').trigger("reset");

Notes on method 1

Things to remember:

  • Form values are reset to their initial/default values. They are not cleared/emptied.
  • Hidden values are not reset. If you have changed hidden input field values, you will have to reset them manually. You can do it by subscribing to reset event.

2. Clear form

The difference between clearing and resetting a form is that in clearing form values we clear all form fields. In other words, we will not reset them to their default values, but will replace their content with "" (empty space).

In other to do that, we will have to go through each field in the form and set its' value to "".

UPDATE: Replaced the code with the one from learningjquery.com. It creates a clearForm jQuery plugin.

$.fn.clearForm = function() {
  return this.each(function() {
    var type = this.type, tag = this.tagName.toLowerCase();
    if (tag == 'form')
      return $(':input',this).clearForm();
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = '';
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

Here is how to use clearForm jQuery plugin:

// Call it on your <form>
$('form').clearForm();

Notes on method 2

Put the plugin definition code into jquery.clearform.js file and include it your project.