Question

我有3个文本输入字段，如first-name，last-name和age以及ADD按钮。我还有一个textarea，我想在单击ADD按钮时将添加的数据显示为textarea的值。

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

这是我写的代码

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

＆＃13;

$(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);
  });
})

＆＃13;

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

＆＃13;

如何在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>

希望它有所帮助。

Answer 2

您需要附加多个数据。

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

Answer 3

在将新值分配给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' ); }); });获取以前的文字：

＆＃13;

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

＆＃13;

{
    "message_type": 1,
    // Other fields specific to this type...
}

＆＃13;

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

3 个答案: