jquery .val() += idiom

Question

What's the clearest commonly used idiom for this jQuery snippet?

$('#someTextarea').val( $('#someTextarea').val() + someString );

It feels clunky to wrap the original code in a one-line function

EDIT: So I can pass a function, which is cool... but my real intentions are for jsfiddles, where I currently do stuff like this:

function lazylog (str) { 
    $('#ta').val( $('#ta').val() + str + '\n' );
}
// or
function lazylogPlain (str) {
    document.getElementById('ta').value += str + '\n';
}

// view results of little experiments
lazylog( test1() );
lazylog( test2() );
lazylog( test3() );
// etc...

Don't know if that context would produce different answers or just make me seem really lazy for wanting to type even less than that. console.log doesn't count, I want the textarea.

Doesn't address the need to work in jsfiddles, but I'm liking the idea of extending jQuery with an `appendVal(string)` method that leverages val() under the hood while avoiding the clunky syntax desribed. — Tim M., May 08 '12 at 02:45

Bergi · Accepted Answer · 2012-11-22T15:12:55.170

Just don't use jQuery.

document.getElementById('someTextarea').value += someString;

will be clearer, faster, and works as well as the jQuery snippet. If you really want to use the $ selector, with only one element you can also

$('#someTextarea')[0].value += someString; // least to type

Other possibilities are the .val() method with a function

$('#someTextarea').val(function(index, oldValue) { return oldValue + someString; })

or a variant with .each() (which is [nearly] equivalent to what val() does internally for text inputs):

$('#someTextarea').each(function(){ this.value += someString; })

These both need a one-line function expression you didn't like, but they have the advantage of working for more than one selected elements (and not breaking for no matched element) and they also return the jQuery object to preserve the chainability feature.

wish I could upvote this twice - once for no jquery before i edited, another for the [0] trick — gruntlr, May 07 '12 at 19:49
@ajax333221: See [Is jQuery an Array?](http://stackoverflow.com/q/5827191/1048572), this will explain the behaviour. It just gets the first DOM node which is associated with the jQuery object. — Bergi, May 20 '12 at 17:57

score 8 · Answer 2 · answered May 07 '12 at 19:25

8

You can pass a function:

$(...).val(function(index, old) { return old + whatever; });

answered May 07 '12 at 19:25

SLaks

868,454
176
1,908
1,964

score 8 · Answer 3 · answered May 07 '12 at 19:28

I don't know about idiomatic but one way to simplify this jQuery expression is to use the overload of val which takes a function object as a parameter. jQuery will pass in the old value to the function and you pass back the new value.

$('#someTextarea').val(function(_, oldValue) { return oldValue + something; });

thecodeparadox · Answer 4 · 2012-05-08T02:36:22.783

1

$('#someTextarea').val(function() {
  return this.value + something;
});

or

$('#someTextarea').val(function() {
  return $(this).val() + something; 
});

or

// mentioned by SLaks, JaredPar

$('#someTextarea').val(function(i, oldVal) {
  return oldVal + something;
});

edited May 08 '12 at 02:36

answered May 07 '12 at 19:27

thecodeparadox

86,271
21
138
164

1

`val()` sometimes does more than directly accessing the DOM `value` property. – Ates Goral May 07 '12 at 19:30
@AtesGoral it always removes carriage returns and only does magic when the element is `select` or `option` – Esailija May 07 '12 at 19:32
Or you can avoid the pointless extra jQuery constructor by using `val` properly, as illustrated in other answers... – lonesomeday May 07 '12 at 19:48
Just curious: Why do you claim "$(this).val()" to be better? – Bergi May 07 '12 at 21:43

jquery .val() += idiom

4 Answers4

Linked