如何在文本区域显示输入(名称+值)
How to show input (name + value) in textarea?
我正在进行这个项目,当同一表单中的一个输入值发生变化时,我需要更改文本区域的值。
HTML:
<form id="form" action="" method="">
<textarea readonly class="overview"></textarea>
<input type="text" class="add" name="product1" />
<input type="text" class="add" name="product2" />
<input type="text" class="add" name="product3" />
<input type="text" class="add" name="product4" />
</form>
允许客户更改input.class。只要其中一个输入发生变化,文本区域值就会发生变化。
文本区域应显示以下内容:
3个产品1
1 x产品3
4 x产品4
有人有主意吗?
提前感谢
Joel
<textarea readonly class="overview" id="mytxtarea"></textarea>
$("#product1").blur(function(){
if($("#product1").val()!='')
{
$("#mytxtarea").val('test value');
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#form .add').on('keyup', function(){
console.log('test');
var string1 = $('#form .product1').val() + ' x product1'n';
var string2 = $('#form .product2').val() + ' x product2'n';
var string3 = $('#form .product3').val() + ' x product3'n';
var string4 = $('#form .product4').val() + ' x product4';
$('#form textarea').val(string1 + string2 + string3 + string4);
});
});
</script>
</head>
<body>
<form id="form" action="" method="">
<textarea readonly class="overview"></textarea>
<input type="text" class="add product1" name="product1" />
<input type="text" class="add product2" name="product2" />
<input type="text" class="add product3" name="product3" />
<input type="text" class="add product4" name="product4" />
</form>
</body>
</html>
$(".add").keyup(function () {
var app=""
$(".add").each(function () {
if( $(this).val() ) {
var value=$(this).val();
var name=$(this).attr('name');
app +=value+"*"+name+ "'n" ;
}
});
$(".overview").text(app);
});
看这个。
希望这能给你一些解决方案。
这将实现您想要的。。。
$("input.add").keyup(function() {
var msg = "";
$("input.add").each( function() {
if( $(this).val() ) {
msg += $(this).val() + "x " + $(this).attr("name") + "'n";
}
});
$("textarea.overview").text(msg)
});
我在这里使用了您的HTML:http://jsfiddle.net/XYXpp/
$('input').keyup(function () {
var inputedValue = $(this).val();
var name = $(this).attr('name');
$(".overview").text(inputedValue+name);
});
var fd = new FormData()
fd.append('csrfmiddlewaretoken', document.getElementsByName('csrfmiddlewaretoken')[0].value)
fd.append('field_name', $("input[name='field_name']").serialize())
将返回
['field_name=9&field_name=15&field_name=10']
然后,您必须解析视图中的信息
相关文章:
- 名称输入的索引
- 如何通过Jquery从具有相同名称但不同索引的输入中获取所有值
- JqueryUI对话框没有'不能使用特定的输入名称
- CasperJS填充表单-输入名称有方括号
- 如何将ng消息与<输入名称='用户[名称]'>
- 任何不选择已在令牌输入中选择的名称的想法
- 当一个输入与另一个输入的 ID 具有相同的名称时的含义
- 使用jQuery输入的动态名称
- 名称href标签根据用户文本输入JavaScript
- 如何自动填充输入文本框值以与名称相同
- JS/Jquery - 如果输入具有数组的任何名称,则返回关联的值
- 输入按钮分隔显示按钮名称和值
- 序列化表单 - 具有相同名称的输入
- 仅获取所选输入文件的名称
- JS根据类型和名称选择输入
- 使用JSDOM,我想获得所有具有相同名称的输入标记
- 使用输入名称参数在jQuery中取整不起作用
- 在 ASP.NET Web 窗体中显示 HTML 控件的名称(输入类型为“提交”)
- 如何添加名称输入submit()jQuery
- 如何仅显示具有匹配名称输入字段值的表单