Click here to Skip to main content
12,691,789 members (27,348 online)
Click here to Skip to main content
Add your own
alternative version


8 bookmarked

Difference between attr() and val() in jQuery

, 31 May 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Difference between attr() and val() in jQuery


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:


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 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; }


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);


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

Demo Page

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

Demo Page in Browser


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">
     $('#btnEdit').click(function () {
         var name = $('#txtName').attr('value');
         var description = $('#txtDescription').attr('value');
         alert("Name:  " + name + " \n\nDescription:  " + description);

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.



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 :-)


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Snesh Prajapati
Software Developer
India India
I am a Software Developer working on Microsoft technologies. My interest is exploring and sharing the awesomeness of emerging technologies.

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
Brian A Stephens11-Jun-14 3:22
professionalBrian A Stephens11-Jun-14 3:22 
AnswerRe: My vote of 5 Pin
Snesh Prajapati11-Jun-14 4:45
professionalSnesh Prajapati11-Jun-14 4:45 
GeneralMy vote of 3 Pin
Aamer Alduais31-May-14 20:52
memberAamer Alduais31-May-14 20:52 
AnswerRe: My vote of 3 Pin
Snesh Prajapati31-May-14 23:40
professionalSnesh Prajapati31-May-14 23:40 
GeneralRe: My vote of 3 Pin
Aamer Alduais2-Jun-14 20:44
memberAamer Alduais2-Jun-14 20:44 
AnswerRe: My vote of 3 Pin
Snesh Prajapati3-Jun-14 7:33
professionalSnesh Prajapati3-Jun-14 7:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170117.1 | Last Updated 31 May 2014
Article Copyright 2014 by Snesh Prajapati
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid