jQuery concatenate string to input field

Question

I'm trying to concatenate string and display it into my textbox when a td in my table has been clicked.

I did this so far:

   $(document).on("click", ".keywordClick", function () {
            $('.txtKeywords').val($(this).attr('value'));
        });

.keywordClick is td item which contains required string

And

.txtKeywords is the textbox which is empty initially...

Each time someone clicks on string I'd like it to be like this:

"Hello world today" => initial click;

"is a sunny day" => second click;

So the output would be like:

Hello world today is a sunny day... Between each concatenated string should be a empty space " " << like this... Can someone help me out?

why not post the JS and HTML as one complete file? Easier to understand your problem, and to find an answer — Roland Kwee
– Roland Kwee, Commented Feb 23, 2017 at 13:24

Milind Anantwar · Accepted Answer · 2017-02-23 13:24:14Z

2

You can use callback function of .val() which has a function returning the value to set. It receives the index position of the element in the set and the old value as arguments. You can use old value to be concatenated with new value:

$(document).on("click", ".keywordClick", function () {
 var appendText = " " + $(this).attr('value');
  $('.txtKeywords').val( function( index, oldVal ) {
     return oldVal + appendText;
  });
});

answered Feb 23, 2017 at 13:24

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akshay Tilekar · Accepted Answer · 2017-02-23 13:40:13Z

1

      $(".keywordClick").on("click",function () {
         $('.txtKeywords').val($('.txtKeywords').val()+" "+$(this).html());
  
       });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
 <tr>
    <th>Data</th>
  </tr>
  <tr>
    <td class="keywordClick">Hello world today</td>
    <td class="keywordClick">is a sunny day</td>
  </tr>
</table>
</div>
<div>
<input type="text" class= "txtKeywords">
</div>

answered Feb 23, 2017 at 13:40

Akshay Tilekar

2,0502 gold badges14 silver badges23 bronze badges

Collectives™ on Stack Overflow

jQuery concatenate string to input field

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related