我们继承了一个php/CodeIgniter应用程序。在不赘述所有原因的情况下，我需要将值输入到文本区域字段中，以便我可以将一堆数据分组在一起并将其发送到另一个应用程序/外部供应商中的字段。这是我们第一次遇到这个问题，但我认为这不是最后一次，所以我想为此做好准备。
具体内容：
带有一堆字段的 Web 表单。 这是一个由客户端控制的自生成 php/CodeIgniter 应用程序，因此字段因客户端而异。
某些客户可能需要将来自其表单中字段的 3、5、7 等的数据发送给外部供应商，该供应商接收其一端一个字段中的所有数据。简而言之，使用 jQuery，我想将数据从某些字段发送到文本区域字段。
例如，我想将"中心标题"、"全名"和"水果"发送到文本区域字段，每个字段的末尾都有一个换行符。当然，如果用户清空某个字段，则该行项将从文本区域字段中删除。
点击这里查看我的jsFiddle演示。
网页示例：
<form method="post">
<br />
<br />
<fieldset name="Group1" style="border: thin; border-color: green">
<legend>General Information</legend>
<table style="width: 100%">
<tr>
<td style="width: 249px">Center Title:</td>
<td>
<select name="centers" id="centers">
<option value="Corp 1">Corp 1</option>
<option value="Shamrock Gold">Shamrock Gold</option>
<option value="Hensin Way">Hensin Way</option>
</select>
</td>
</tr>
<tr>
<td style="width: 249px">Full Name:</td>
<td>
<input name="fullname" id="fullname" type="text" size="20" />
</td>
</tr>
<tr>
<td style="width: 249px">Job Title:</td>
<td>
<input name="jobtitle" id="jobtitle" type="text" />
</td>
</tr>
<tr>
<td style="width: 249px">Known Alergies:</td>
<td>
<input name="knownAllergies" id="knownAllergies" type="checkbox" value="Yes" />Yes
<input name="knownAllergies" id="knownAllergies" type="checkbox" value="No" />No
</td>
</tr>
<tr>
<td style="width: 249px; height: 102px;">How Many?:</td>
<td style="height: 102px">
<select multiple="multiple" name="Select2">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</td>
</tr>
<tr>
<td style="width: 249px">Fruits:</td>
<td>
<input name="Fruit[]" id="Fruit[]" type="radio" checked="checked" value="Apple" />Apple<br />
<input name="Fruit[]" id="Fruit[]" type="radio" value="Orange" />Orange<br />
<input name="Fruit[]" id="Fruit[]" type="radio" value="Fruit" />Fruit
</td>
</tr>
</table>
<label>Complete Info:</label>
<textarea name="allVendorInfo" id="allVendorInfo" cols="50" rows="7"></textarea><br />
<br />
</fieldset>
</form>
您可以使用以下代码访问选择/用户输入
$(document).ready(function(){
$("input").change(function(e){
if($(this).is(':checked')){
}else{
};
var old = $('#allVendorInfo').val();
$('#allVendorInfo').val(old+ "%" + $(this).attr('name') + '|'+$(this).val() + "%");
});
$("select").change(function(e){
var old = $('#allVendorInfo').val();
$('#allVendorInfo').val(old+ "%" + $(this).attr('name') + '|'+$(this).val() + "%");
});
});
编辑：由于某种原因，原始小提琴被破坏，已更新链接
我在想这样的事情：http://jsfiddle.net/JRwzz/3/
当然，这个的"触发器"可能是运行JS按钮以外的其他东西，例如，我想它会在提交或其他用户操作上。
它首先清除文本区域，然后循环所有输入并选择，具体取决于元素的类型 - 复选框，单选，选择等。 它使用略有不同的方法来获取值（例如，如果它是一个复选框，它只想从选中的框中获取值）
为了将复选框组的值全部放在一行上，需要一些润色才能使它像这样，但希望这足以让您了解这个想法。
然后在它找到的每件事上，它都会将其附加到文本区域并在末尾放置一个换行符。
在将它包含在文本区域中之前，添加一个条件来检查另一个要检查的 atribute （例如 data-export="yes"）并不难。
只是要注意，我这样想是因为您说所有表单都是动态的，所以我尽量不需要依赖 ID 或名称来做事，它只适用于任何形式。 如果您可以获得生成表单的代码，以在您希望包含在文本区域中的表单上输出 html 中的属性（也许是客户端选择将应用于其管理区域中的某种方法），那么这将是正确的，将节省为每个客户端摆弄 JS 的麻烦。
尝试这样的事情：
$("select, input").bind("change keyup", function() {
var form = $("<form>");
var data = new Object();
form.append($(":checked").clone());
$.each($("select"), function(i, item) {
if ($(item).val() != null) {
form.append(($(item).clone()));
}
});
$.each($("input[type='text']"), function(i, item) {
if ($(item).val().length > 0) form.append(($(item).clone()));
});
$("#allVendorInfo").val(form.serialize());
}).first().trigger("change");