0

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

具体情况：

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

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

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

单击此处查看我的 jsFiddle 演示。

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

3 回答 3

1

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

我在想这样的事情：http: //jsfiddle.net/JRwzz/3/

当然，“触发器”可能不是“运行 JS”按钮，例如，我想它会在提交或其他用户操作时出现。

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

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

然后在它找到的每一件事上，它都将它附加到 textarea 并在最后放置一个换行符。

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

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

于 2012-04-17T15:18:34.623 回答
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() + "%"); 
    });     
});​
于 2012-04-17T14:58:49.010 回答
0

尝试这样的事情：

$("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");​
于 2012-04-17T15:30:10.097 回答