Append text to input field

Question

I need to append some text to an input field...

possible duplicate of [Is it possible to do ".value +=" in JQuery?](http://stackoverflow.com/questions/1224133/is-it-possible-to-do-value-in-jquery) — Patrick McElhaney, Jul 10 '15 at 13:22

score 227 · Accepted Answer · edited Oct 11 '18 at 08:04

227

    $('#input-field-id').val($('#input-field-id').val() + 'more text');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="input-field-id" />

edited Oct 11 '18 at 08:04

ADH - THE TECHIE GUY

4,125
3
31
54

answered May 08 '09 at 20:50

Ayman Hourieh

132,184
23
144
116

6

Please read my answer on this question as well - There really is no reason to have to call `$('#input-field-id')` twice... Very simple answer though - +1 – gnarf Sep 23 '11 at 22:22
2

I feel like there should be a function that adds to the value of an input like you can with the `innerHTML`. – Blue Sheep Dec 11 '13 at 00:39

score 117 · Answer 2 · answered Jul 30 '11 at 20:39

117

There are two options. Ayman's approach is the most simple, but I would add one extra note to it. You should really cache jQuery selections, there is no reason to call $("#input-field-id") twice:

var input = $( "#input-field-id" );
input.val( input.val() + "more text" );

The other option, .val() can also take a function as an argument. This has the advantange of easily working on multiple inputs:

$( "input" ).val( function( index, val ) {
    return val + "more text";
});

answered Jul 30 '11 at 20:39

gnarf

105,192
25
127
161

3

Loving the 'other option' - nice bit of FP. – laher Sep 22 '11 at 23:15
Note, page refresh or form submit and back on the page will of course add the same appended text each time, so you end up with "more text" then "more textmore text" etc. – James Sep 08 '20 at 15:59

score 17 · Answer 3 · edited Mar 06 '16 at 19:06

17

If you are planning to use appending more then once, you might want to write a function:

//Append text to input element
function jQ_append(id_of_input, text){
    var input_id = '#'+id_of_input;
    $(input_id).val($(input_id).val() + text);
}

After you can just call it:

jQ_append('my_input_id', 'add this text');

edited Mar 06 '16 at 19:06

L84

45,514
58
177
257

answered May 08 '09 at 21:00

Margus

19,694
14
55
103

I cannot add placeholder to a search box and would like to use this and then have the box clear when user puts cursor in search box. Is this doable? – DevKev Feb 24 '14 at 16:47

Nadu · Answer 4 · 2016-08-12T15:38:13.253

5

 // Define appendVal by extending JQuery
 $.fn.appendVal = function( TextToAppend ) {
  return $(this).val(
   $(this).val() + TextToAppend
  );
 };
//_____________________________________________

 // And that's how to use it:
 $('#SomeID')
  .appendVal( 'This text was just added' )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<textarea 
          id    =  "SomeID"
          value =  "ValueText"
          type  =  "text"
>Current NodeText
</textarea>
  </form>

Well when creating this example I somehow got a little confused. "ValueText" vs >Current NodeText< Isn't .val() supposed to run on the data of the value attribute? Anyway I and you me may clear up this sooner or later.

However the point for now is:

When working with form data use .val().

When dealing with the mostly read only data in between the tag use .text() or .append() to append text.

edited Aug 12 '16 at 15:38

answered Aug 12 '16 at 14:42

Nadu

2,401
1
25
30

1

Does this add something new to answer the question better? I understand you're just making an extension, but this has been answered for quite some time. Just want to make sure the quality of SO is upheld. – Kevin Brown Aug 12 '16 at 14:43
2

Thanks for caring - I like that. But yes you're right there's not much new the essence stays the same. However when I digesting the current answers I felt there could be a little done about the style and implementation. I first checked if some of the post could be edited, but in the end I thought it's best to make a new one. So what is new: * You can run the snipped. * The extension helps much on the way to write self-documentating code, while not distracting too much of the essence. – Nadu Aug 12 '16 at 15:22

score 4 · Answer 5 · edited Mar 17 '16 at 13:16

4

You are probably looking for val()

edited Mar 17 '16 at 13:16

twernt

20,271
5
32
41

answered May 08 '09 at 20:51

kgiannakakis

103,016
27
158
194

score 0 · Answer 6 · answered Nov 11 '16 at 09:42

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style type="text/css">
        *{
            font-family: arial;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <button id="more">More</button><br/><br/>
    <div>
        User Name : <input type="text" class="users"/><br/><br/>
    </div>
    <button id="btn_data">Send Data</button>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('#more').on('click',function(x){
                var textMore = "User Name : <input type='text' class='users'/><br/><br/>";
                $("div").append(textMore);
            });

            $('#btn_data').on('click',function(x){
                var users=$(".users");
                $(users).each(function(i, e) {
                    console.log($(e).val());
                });
            })
        });
    </script>
</body>
</html>

Output

Append text to input field

6 Answers6

Linked