jQuery val vs attr value

Question

I had thought these two were the same  but they appear to not be  I ve generally been using  obj attr  value   to work with form fields  but on the page I m currently building   obj attr  value   does not return the text I enter in my field  However   obj val   does    On a different page I ve built  both  obj attr  value   and  obj val   return the text entered in the form field    What could account for  obj attr  value   working as expected in one case but not in another   What is the proper way to set and retrieve a form field s value using jQuery

User · Answer

jQuery   changer   change function          var addressdata   jQuery  option selected   this  attr  address        jQuery   showadd   text addressdata

User · Answer

Let s learn from an example  Let there be a text input field with default value    Enter your name   var inp      input   attr  value     var inp      input   val      Both will return  Enter your name   But suppose you change the default text to  Jose  in your browser   var inp      input   attr  value      will still give the default text i e   Enter your name    var inp      input   val      But  val   will return  Jose   i e  the current value   Hope it helps

User · Answer

The proper way to set and get the value of a form field is using  val   method       field   val  test       Set var value       field   val       Get   With jQuery 1 6 there is a new method called  prop         As of jQuery 1 6  the  attr   method returns undefined for attributes   that have not been set  In addition   attr   should not be used on   plain objects  arrays  the window  or the document  To retrieve and   change DOM properties  use the  prop   method

User · Answer

There is a big difference between an objects properties and an objects attributes  See this questions  and its answers  for some of the differences   prop   vs  attr     The gist is that  attr      is only getting the objects value at the start  when the html is created   val   is getting the object s property value which can change many times

User · Answer

Since jQuery 1 6  attr   will return the original value of an attribute  the one in the markup itself   You need to use prop   to get the current value   var currentValue    obj prop  value      However  using val   is not always the same  For instance  the value of  lt select gt  elements is actually the value of their selected option  val   takes that into account  but prop   does not  For this reason  val   is preferred

User · Answer

this example may be useful    x000D   x000D   lt html gt  x000D     lt head gt  x000D     lt script src  https   ajax googleapis com ajax libs jquery 1 8 1 jquery min js  gt  lt  script gt  x000D     lt  head gt  x000D     lt body gt  x000D    lt input id  test  type  text     gt  x000D    lt button onclick  testF     gt click lt  button gt  x000D    x000D    x000D    lt script gt  x000D   function testF    x000D    x000D    alert     test   attr  value     x000D    alert      test   prop  value     x000D    alert     test   val     x000D      x000D    lt  script gt  x000D     lt  body gt  x000D    lt  html gt  x000D   x000D   x000D    in above example  everything works perfectly  but if you change the version of jquery to 1 9 1 or newer in script tag you will see  undefined  in the first alert  attr  value   doesn t work with jquery version 1 9 1 or newer

User · Answer

In attr  value   you re specifically saying you re looking for the value of an attribute named vaule  It is preferable to use val   as this is jQuery s out of the box feature for extracting the value out of form elements

User · Answer

In order to get the value of any input field  you should always use  element val   because jQuery handles to retrieve the correct value based on the browser of the element type

User · Answer

I have always used  val   and to be honest I didnt even know you could get the value using  attr  value    I set the value of a form field using  val   as well ex      myfield   val  New Value

User · Answer

PS  This is not an answer but just a supplement to the above answers   Just for the future reference  I have included a good example that might help us to clear our doubt   Try the following  In this example I shall create a file selector which can be used to select a file and then I shall try to retrieve the name of the file that I selected  The HTML code is below    lt html gt       lt body gt           lt form action     method  post  gt               lt input id   myfile  type  file   gt           lt  form gt           lt script type  text javascript  src  jquery js  gt   lt  script gt           lt script type  text javascript  src  code js  gt   lt  script gt       lt  body gt   lt  html gt       The code js file contains the following jQuery code  Try to use both   of the jQuery code snippets one by one and see the output    jQuery code with attr  value         myfile   change function        alert   this  attr  value             mybutton   removeAttr  disabled          jQuery code with val         myfile   change function        alert   this  val             mybutton   removeAttr  disabled          Output   The output of jQuery code with attr  value   will be  undefined   The output of jQuery code with val   will the file name that you selected   Explanation  Now you may understand easily what the top answers wanted to convey  The output of jQuery code with attr  value   will be  undefined  because initially there was no file selected so the value is undefined  It is better to use val   because it gets the current value   In order to see why the undefined value is returned try this code in your HTML and you ll see that now the attr   value   returns  test  always  because the value is  test  and previously it was undefined    lt input id   myfile  type  file  value  test   gt    I hope it was useful to you

User · Answer

If you get the same value for both property and attribute  but still sees it different on the HTML try this to get the HTML one       inputID   context defaultValue

User · Answer

jquery - Get the value in an input text box   lt script type  text javascript  gt    jQuery document  ready function     var classValues   jQuery   cart tr   find  td product-name   text    classValues   classValues replace     W   g        jQuery  input name your-p-name    val classValues      alert classValues          lt  script gt

User · Answer

Example more    attr   is various  val   is just one  Prop is boolean are different    x000D   x000D    EXAMPLE 1 - RESULT x000D     div   append    input idone   attr  value    append   lt br gt     x000D     div   append    input name nametwo    attr  family    append   lt br gt     x000D     div   append    input idtwo   attr  name    append   lt br gt     x000D     div   append    input name nameone    attr  value     x000D   x000D     div   append   lt hr gt       EXAMPLE 2 x000D     div   append    input idone   val    append   lt br gt     x000D   x000D     div   append   lt hr gt       EXAMPLE 3 - MODIFY VAL x000D     div   append    input idone   val  idonenew    append   lt br gt     x000D     input idone   attr  type   initial    x000D     div   append   lt hr gt       EXAMPLE 3 - MODIFY VALUE x000D     div   append    input name nametwo    attr  value    new-jquery-pro    append   lt br gt     x000D     input idtwo   attr  type   initial    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt input type  hidden  class  idone  name  nameone  value  one-test  family  family-number-one  gt  x000D   lt input type  hidden  id  idtwo  name  nametwo  value  two-test  family  family-number-two  gt  x000D   lt br gt  x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

jQuery   morepost   live  click   function      var loadID   jQuery this  attr  id      get the id  alert loadID                you can also get the value of id using  attr

[jquery] jQuery .val() vs .attr("value")

Examples related to jquery

Examples related to forms