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

时间:2018-06-08 08:28:25

标签: javascript jquery arrays

我有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;
&#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;
&#13;
&#13;

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

3 个答案:

答案 0 :(得分:2)

我建议您使用数组来简化代码,然后使用:

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

希望它有所帮助。

答案 1 :(得分:1)

您需要附加多个数据。

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

答案 2 :(得分:1)

在将新值分配给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;
&#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;
&#13;
&#13;