.prop() Vs .val() .setting An Input Text Value With Jquery

After reading (the interesting) .prop() vs .attr() and jQuery Performance : attributes doubt arise in my mind about what is better to use: .prop() or .val() ? I want to set an inpu

Solution 1:

You want to use val(). That's what the function is for, specifically for the value of the input.

It's also quicker to write, easier to understand and while using val, you can change the value multiple times if need be.

Your chart says

Higher is better

and val() higher.

Also, like you've already quoted,

The .val() method should be used for getting and setting value.

This means that unless you're dealing with disabled properties, use:

$('input').val();

Also as a side note, the link you posted, after running tests, shows that val() is faster than prop().

Since you LOVE to show some graphs and pictures, i'm going to add some:

Taken from this link

Pure JS is better if you're arguing over speed.

Solution 2:

Dude, you cannot compare prop to val, that makes no sense!

val is designed to set/get the attribute "value" from the current selected node(s). So that's the only method you need for your use-case. (I want to set an input text value).

Of course you can workaround val by using attr('value') or prop('value') but why do you want to make boilerplate code?

You seem to be confused on what prop was designed for. So let me explain a little.

prop was designed to solve the issue of retrieving Boolean-like properties from the selected DOM node. It should be compared to the method attr not to val

Consider the following four cases

<inputtype="checkbox" checked />
<inputtype="checkbox" checked="checked" />
<inputtype="checkbox" checked="false" />
<inputtype="checkbox" checked="true" />

• You will never ever get the state checked/unchecked of the input using val()
• You are not sure what is the checked state of the control if you retrieve it using attr('checked'). This will give you back a string.
• If you use the result of attr('checked') inside of an if statement, you are at risk of getting false positives, e.g., if('false')

The only way to consistently get the checked state out of the control is by using the prop method.

So if you wanna make a real comparison please compare it to attr, not to val

Solution 3:

Your charts are indicating that prop() is better than val() in terms of performance.

val() could be internally using the same logic of prop() along with some additional code statements for completing the actual operation(Ex: setting value), that additional code of val() might lead to little low performance than prop().

It would be nice to use val() for setting a value for an element perhaps that is what this function is meant for, in general it's preferred to go with the operation specific functions instead of using the generic ones.

In your case, if you don't want to loose even a slight variation in performance then go with prop() itself.

Solution 4:

The other answers explain the main differences pretty well with one exception.

Since jQuery "normalizes" browser differences val() removes carriage returns.

This affects textareas in IE 8 and below.

Example: For the textarea input of

HEL


LO

.val() gives you the string "HEL\n\nLO" and a length of 7

.prop("value") gives you the string "HEL\r\n\r\nLO" with a length of 9

Solution 5:

One more bug when using prop(). Under IE 11, the following code wouldn't set the value:

var props = {'value':'test', 'type':'radio'};
var input = $('<input/>').prop(props);
$(document.body).append(input);