如何使用 Web 表单中的各种字段数据填充 textarea 字段？

Question

我们继承了一个 php/CodeIgniter 应用程序。无需详细说明原因，我需要将值输入到 textarea 字段中，以便我可以将一堆数据组合在一起并将其发送到另一个应用程序/外部供应商的字段中。这是我们第一次遇到这个问题，但我不认为这是最后一次，所以我想为它做准备。

具体情况：

上面有一堆字段的 Web 表单。它是一个由客户端控制的自生成 php/CodeIgniter 应用程序，因此字段因客户端而异。

某些客户可能需要将表单中字段的 3、5、7 等的数据发送给外部供应商，该供应商在其一端接收一个字段中的所有数据。所以简而言之，使用 jQuery，我想将数据从某些字段发送到 textarea 字段。

例如，我想将 Center Title、Full Name 和 Fruits 发送到 textarea 字段，每个字段的末尾都有一个换行符。当然，如果用户清空一个字段，该行项目将从 textarea 字段中删除。

Click here to view my jsFiddle demo.

HTML 示例：

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

Answer 1

您可以使用以下代码访问选择/用户输入

 $(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() + "%"); 
    });     
});​

Answer 2

编辑：原始小提琴由于某种原因被破坏，已更新链接

我在想一些类似的事情：http://jsfiddle.net/JRwzz/3/

这个“触发器”当然可以是 Run JS 按钮以外的东西，例如，我想它会在提交或其他用户操作时出现。

它首先清除文本区域，然后循环所有输入并选择，具体取决于元素的类型 - 复选框、单选、选择等。它使用稍微不同的方法来获取值（例如，如果它是一个复选框，它只想要从选中的值中获取值）

为了让一个复选框组的值都在一行上以及类似的东西，它需要一些润色，但希望这足以让你明白这一点。

然后在它找到的每一个东西上，它都会将它附加到文本区域并在末尾放置一个换行符。

添加一个条件来检查另一个属性（例如 data-export="yes"）在将其包含到文本区域之前进行检查并不难。

请注意，我是这样想的，因为您说所有表单都是动态的，所以我尽量不需要依赖 ID 或名称来处理事物，它只适用于任何表单。如果您可以获得生成表单的代码，以在 html 中输出您希望包含在 textarea 中的属性（并且可能是您的客户选择将应用于其管理区域的某些方法），那么那d 当场，将不必为每个客户摆弄 JS。

Answer 3

试试这样的：

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