Append text to input field

Question

I need to append some text to an input field

User · Answer

You are probably looking for val

User · Answer

x000D   x000D      Define appendVal by extending JQuery x000D     fn appendVal   function  TextToAppend     x000D    return   this  val  x000D       this  val     TextToAppend x000D       x000D      x000D                                                  x000D   x000D      And that s how to use it  x000D       SomeID   x000D     appendVal   This text was just added    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt form gt  x000D   lt textarea  x000D            id        SomeID  x000D            value     ValueText  x000D            type      text  x000D   gt Current NodeText x000D   lt  textarea gt  x000D     lt  form gt  x000D   x000D   x000D    Well when creating this example I somehow got a little confused   ValueText  vs  Current NodeText lt  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

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt  lt  title gt       lt script src  https   ajax googleapis com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt       lt style type  text css  gt                         font-family  arial              font-size  15px                 lt  style gt   lt  head gt   lt body gt       lt button id  more  gt More lt  button gt  lt br  gt  lt br  gt       lt div gt          User Name    lt input type  text  class  users   gt  lt br  gt  lt br  gt       lt  div gt       lt button id  btn data  gt Send Data lt  button gt       lt script type  text javascript  gt          jQuery document  ready function                      more   on  click  function x                   var textMore    User Name    lt input type  text  class  users   gt  lt br  gt  lt br  gt                       div   append textMore                                    btn data   on  click  function x                   var users     users                      users  each function i  e                        console log   e  val                                                         lt  script gt   lt  body gt   lt  html gt    Output

User · Answer

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

User · Answer

x000D   x000D          input-field-id   val     input-field-id   val      more text    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt input id  input-field-id    gt  x000D   x000D   x000D

User · Answer

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

[jquery] Append text to input field

Examples related to jquery

Examples related to text

Examples related to append