Difference between attr() and val() in jQuery

• Download Source Code - 870Kb

Introduction

Few days back, I was creating a webpage for editing products information. After editing I need to get the modified value from all textboxes but I was not able to. It was surprising and I started thinking why it is not working? I was not getting any error or something in browser developer tool console also.

I would like to explain the same scenario here by giving a demo example.

Code Example:

Note:

I am using Visual Studio 2012 and ASP.NET MVC 4 as framework. It is just a quick tip so I am not concentrating on the coding standard etc.

Following is the explanation of demo example:

Model:

Model name is Product which is having just three properties as shown below:

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }        
    }
    

Controller:

In controller, just I am passing model having list of Products to corresponding view.

        public ActionResult Demo()
        {
            List<product> productList = new List<product>
                                        { new Product{ Id = 1, Name = "Laptop", Description = "Dell" },
                                          new Product{ Id = 2, Name = "Mobile", Description = "Lenovo" }
                                        };
            return View(productList);
        }
    

View:

It is having two textboxes and corresponding Edit buttons to update Products’ information.

As you can see in the above highlighted code value attribute ( value="@item.Name") is accountable to display value into textboxes as shown below.

Problem:

Once values are edited into textboxes, on “Edit” button click and I was trying to get updated content using attr() to send those to server. The code shown below is very simple but that was not working:

        <script src="~/Scripts/jquery-1.10.2.min.js">
        <script>
             $('#btnEdit').click(function () {
                 var name = $('#txtName').attr('value');
                 var description = $('#txtDescription').attr('value');
                 alert("Name:  " + name + " \n\nDescription:  " + description);
                 });
        <script>
    

In the below screen shot you can see I have edited the value of textboxes but on “Edit” button click, but updated value is not displaying in alert box corresponding to first pair of textboxes.

Solution:

When I used val() at the place of attr() to get the updated content of textboxes, It was working as expected.

        var name = $('#txtName').val();
        var description = $('#txtDescription').val();
        alert("Name:  " + name + " \n\nDescription:  " + description);
    

As shown in below screen shot I was able to get the updated content:

Point of Interest:

Following is key learning about how attr() and val() work:
attr(): attr function is used to get the value of an attribute but it takes the value while html was created.
val(): val function is used to get the current content of an input elements (input,select,checkbox..)

Hope this tip will save your time or enable to save your peers time someday :-)