我有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代码:
$(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中添加多个数据?
答案 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' );
});
});
获取以前的文字:
<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;