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?

jQuery .val() vs .attr(): http://stackoverflow.com/questions/4837133/whats-the-difference-between-jquery-val-and-attrvalue — Adriano, Jul 06 '14 at 20:09
The real reason is that `val()` only gets the value from certain type of tags, for example you can get the value of an input with `val()` but if you add the `value` attribute to an `a` tag or a `div` tag, it won't work. You'll have to use `.attr("value")` — Seraf, Nov 09 '17 at 21:02

Naftali · Answer 1 · 2018-07-02T00:16:44.003

96

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.

edited Jul 02 '18 at 00:16

answered Nov 29 '11 at 14:56

Naftali

144,921
39
244
303

1

@Neal : I guess you mean that val() gets/sets `properties` vs attr() gets/sets `attributes`, just adding that comment because I didn't get it the first time I read your answer. Maybe you could add this info to clarify? great answer btw. – Adriano Jul 06 '14 at 20:22

score 27 · Answer 2 · answered Nov 29 '11 at 14:56

27

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 <select> elements is actually the value of their selected option. val() takes that into account, but prop() does not. For this reason, val() is preferred.

answered Nov 29 '11 at 14:56

Frédéric Hamidi

258,201
41
486
479

Great note on the difference encountered when dealing with ` – Canuk Apr 21 '15 at 20:56

score 4 · Answer 3 · edited Jun 28 '18 at 10:39

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:

<html>
    <body>
        <form action="#" method="post">
            <input id ="myfile" type="file"/>
        </form>
        <script type="text/javascript" src="jquery.js"> </script>
        <script type="text/javascript" src="code.js"> </script>
    </body>
</html>

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.

<input id ="myfile" type="file" value='test'/>

I hope it was useful to you.

score 3 · Answer 4 · edited Mar 30 '18 at 18:56

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.

score 2 · Answer 5 · edited Dec 06 '16 at 13:24

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.

score 2 · Answer 6 · edited Jun 28 '18 at 10:57

2

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.

edited Jun 28 '18 at 10:57

Manikandan C

668
1
9
22

answered Nov 29 '11 at 14:57

ShankarSangoli

69,612
13
93
124

score 1 · Answer 7 · answered May 28 '15 at 10:38

1

jQuery('.changer').change(function () {
    var addressdata = jQuery('option:selected', this).attr('address');
    jQuery("#showadd").text(addressdata);
});

answered May 28 '15 at 10:38

harsimer

55
7

score 1 · Answer 8 · answered Sep 19 '15 at 13:34

1

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

answered Sep 19 '15 at 13:34

harsimer

55
7

score 1 · Answer 9 · edited Jun 28 '18 at 10:39

this example may be useful:

<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  </head>
  <body>
 <input id="test" type="text"  />
 <button onclick="testF()" >click</button>
 
 
 <script>
 function testF(){
 
  alert($('#test').attr('value'));
  alert( $('#test').prop('value'));
  alert($('#test').val());
  }
 </script>
  </body>
 </html>

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.

score 0 · Answer 10 · answered Nov 05 '15 at 18:52

Example more... attr() is various, val() is just one! Prop is boolean are different.

//EXAMPLE 1 - RESULT
$('div').append($('input.idone').attr('value')).append('<br>');
$('div').append($('input[name=nametwo]').attr('family')).append('<br>');
$('div').append($('input#idtwo').attr('name')).append('<br>');
$('div').append($('input[name=nameone]').attr('value'));

$('div').append('<hr>'); //EXAMPLE 2
$('div').append($('input.idone').val()).append('<br>');

$('div').append('<hr>'); //EXAMPLE 3 - MODIFY VAL
$('div').append($('input.idone').val('idonenew')).append('<br>');
$('input.idone').attr('type','initial');
$('div').append('<hr>'); //EXAMPLE 3 - MODIFY VALUE
$('div').append($('input[name=nametwo]').attr('value', 'new-jquery-pro')).append('<br>');
$('input#idtwo').attr('type','initial');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="hidden" class="idone" name="nameone" value="one-test" family="family-number-one">
<input type="hidden" id="idtwo" name="nametwo" value="two-test" family="family-number-two">
<br>
<div></div>

score -1 · Answer 11 · answered Jan 25 '18 at 09:02

jquery - Get the value in an input text box

<script type="text/javascript"> 

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

});

</script>

score -1 · Answer 12 · answered Jun 05 '18 at 14:14

-1

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;

answered Jun 05 '18 at 14:14

Rodrigo Sangiovanni Lima

1

score -3 · Answer 13 · answered Nov 29 '11 at 14:56

-3

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.

answered Nov 29 '11 at 14:56

David Hedlund

128,221
31
203
222

score -5 · Answer 14 · answered Nov 29 '11 at 14:59

-5

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

answered Nov 29 '11 at 14:59

Meisam Mulla

1,845
3
23
37

jQuery .val() vs .attr("value")

14 Answers14

Linked

Related