Click here to Skip to main content
11,431,011 members (70,866 online)
Click here to Skip to main content

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

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.

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

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.

Problem

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:

Solution

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

License

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

Share

About the Author

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

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    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
Web04 | 2.8.150428.2 | Last Updated 31 May 2014
Article Copyright 2014 by Snesh Prajapati
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid