jQuery将字段数据添加到数组中以显示在textarea下答案

【问题标题】：jQuery add fields data into array to display under textareajQuery将字段数据添加到数组中以显示在textarea下
【发布时间】：2018-06-08 16:57:19
【问题描述】：

我有 3 个文本输入字段，例如名字、姓氏和年龄以及一个添加按钮。我还有一个文本区域，我想在单击添加按钮时将添加的数据显示为文本区域的值。

我写了一些代码，但它只给了我 textarea 内 3 个输入字段数据的最新值，但我想在 textarea 内用逗号分隔显示所有添加的数据。示例：使用 jquery 的 Arora Shetty 25、Alok Kumar 30 等。

这是我写的代码

<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 代码：

$(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>

如何在 textarea 中添加多个数据？

【问题讨论】：

add_data != add_flower
它在 sn-p 中运行良好。有什么问题？
我需要添加多个数据。现在，如果您更新最后一个数据，它会添加最新数据。我需要抓取所有添加的数据，并且没有数据会消失

标签： javascript jquery arrays

【解决方案1】：

我建议你使用数组来简化你的代码，然后，使用：

.push()添加一条数据，
.join() 将所有数组元素与你想要的字符串连接起来，

那么，您只需要在替换（添加）其内容之前获取textarea 的当前值即可。

$('#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>

希望对你有帮助。

【讨论】：

【解决方案2】：

您需要先从textarea 获取之前的文本，然后再将新值赋给它：

$(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>

【讨论】：

这简直太完美了。非常感谢
@user3443037 我给了你第一个答案。这根本不公平。
@PraveenKumar 不要表现得幼稚。这就是必须接受谁给出第一个答案的规则吗？
@AnkitAgarwal 同意你的幼稚，但这不公平。哈哈。兄弟，每个人都花时间在这里得到一些东西......无论如何......:)

【解决方案3】：

好的，您需要附加多个数据。

$(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>

【讨论】：