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

Question

我有 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中添加多个数据？

Answer 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>

希望对您有所帮助。