jQuery add fields data into array to display under textarea

Question

I have 3 text input fields like first-name,last-name and age and a ADD button. I also have a textarea where I want to display the added data as a value of textarea when click on ADD button.

I write some code but its only giving me the latest value of 3 input fields data inside textarea but I want to display all added data with comma separated inside textarea. example: Arora Shetty 25, Alok Kumar 30 etc. using jquery.

Here is the code i wrote

<input type="text" id="first_name" name="first_name"> 
<input type="text" id="last_name" name="last_name">
<input type="text" id="age" name="age">
<textarea id="fetch_here"></textarea>
<button class="btn btn-success" id="add_data">ADD</button>

jQuery code:

$(document).ready(function() {
  $('#add_data').click(function() {
    var first_name = $('#first_name').val();
    var last_name = $('#last_name').val();
    var age = $('#age').val();
    var user_data = $('#fetch_here').val(first_name + ' ' + last_name + ' ' + age);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="first_name" name="first_name">
<input type="text" id="last_name" name="last_name">
<input type="text" id="age" name="age">
<textarea id="fetch_here"></textarea>
<button class="btn btn-success" id="add_data">ADD</button>

How can i add multiple data inside textarea?

I need to add multiple data. right now its adding the most recent data if you update the last data is gone. I need to grab all data that added and no data will disappear — Mohammad Golam Dostogir
– Mohammad Golam Dostogir, Commented Jun 8, 2018 at 8:32

Takit Isy · Accepted Answer · 2018-06-08 08:57:19Z

2

I suggest you to use an array to simplify your code, then, use:

.push() to add a piece of data,
.join() to join all the array elements with the string you want,

Then, you only need to get the current value of the textarea before replacing (adding) its content.

$('#add_data').click(function() {
  var data = [];
  data.push($('#first_name').val());
  data.push($('#last_name').val());
  data.push($('#age').val());
  var current_val = $('#fetch_here').val();
  $('#fetch_here').val(current_val + data.join(' ') + '\n');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="first_name" name="first_name">
<input type="text" id="last_name" name="last_name">
<input type="text" id="age" name="age">
<textarea id="fetch_here"></textarea>
<button class="btn btn-success" id="add_data">ADD</button>

Hope it helps.

edited Jun 8, 2018 at 8:57

answered Jun 8, 2018 at 8:33

Takit Isy

10.2k3 gold badges29 silver badges48 bronze badges

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

Comments

Ankit Agarwal · Accepted Answer · 2018-06-08 08:34:23Z

1

You need to get the previous text from the textarea before you assign the new value into it:

$(document).ready(function(){
  $('#add_data').click(function(){
     var first_name = $('#first_name').val();
     var last_name = $('#last_name').val();
     var age = $('#age').val();
     var user_data = $('#fetch_here').text(
       $('#fetch_here').text() +
       first_name+' '+last_name+' '+age + '\n' );
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="first_name" name="first_name"> 
<input type="text" id="last_name" name="last_name">
<input type="text" id="age" name="age">
<textarea id="fetch_here"></textarea>
<button class="btn btn-success" id="add_data">ADD</button>

answered Jun 8, 2018 at 8:34

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

3 Comments

Praveen Kumar Purushothaman Over a year ago

@user3443037 I gave you the first answer. This is not fair at all.

Ankit Agarwal Over a year ago

@PraveenKumar don't act childish. Is that the rule that who gave first answer need to be accepted

Praveen Kumar Purushothaman Over a year ago

@AnkitAgarwal Agree with you on being childish, but isn't that fair. LoL. Bro, everyone spend their time here to get something out... Anyway... :)

Praveen Kumar Purushothaman · Accepted Answer · 2018-06-08 08:31:51Z

1

Alright for multiple data you need to append.

$(document).ready(function() {
  $('#add_data').click(function() {
    var first_name = $('#first_name').val();
    var last_name = $('#last_name').val();
    var age = $('#age').val();
    var user_data = $('#fetch_here').val($('#fetch_here').val() + "\n" + first_name + ' ' + last_name + ' ' + age);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="first_name" name="first_name">
<input type="text" id="last_name" name="last_name">
<input type="text" id="age" name="age">
<textarea id="fetch_here"></textarea>
<button class="btn btn-success" id="add_data">ADD</button>

answered Jun 8, 2018 at 8:31

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Collectives™ on Stack Overflow

jQuery add fields data into array to display under textarea

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related