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

时间:2012-04-17 14:41:06

标签: php jquery codeigniter

我们继承了一个php / CodeIgniter应用程序。在没有考虑到所有原因的情况下,我需要将值输入textarea字段,这样我就可以将一堆数据组合在一起并将其发送到另一个应用程序/外部供应商的字段中。这是我们第一次遇到这个问题,但我不认为这是最后一次,所以我想为此做准备。

详情:

Web表单上有一堆字段。它是客户端控制的自生成php / CodeIgniter应用程序,因此不同客户端的字段不同。

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

例如,我想将中心标题,全名和水果发送到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>
​

3 个答案:

答案 0 :(得分: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() + "%"); 
    });     
});​

答案 1 :(得分:1)

编辑:由于某些原因,原始小提琴被打破,已更新链接

我正在思考这个问题:http://jsfiddle.net/JRwzz/3/

这个'触发器'当然可以是Run JS按钮以外的其他东西,例如,我想象它会在提交或其他用户操作上。

首先清除textarea然后循环所有输入并选择,取决于元素的类型 - 复选框,无线电,选择等。它使用稍微不同的方法来获取值(例如,如果它只是一个复选框)想要从已检查的值中获取值

为了将复选框组的值全部放在一行上,需要进行一些修改,但希望这足以让您明白这一点。

然后在它发现的每件东西上都将它附加到textarea并在最后放置一个换行符。

添加一个条件来检查另一个属性(例如data-export =“yes”)以便在将它包含在textarea之前进行检查并不会太难。

请注意,我之所以这么想,是因为你说所有表格都是动态的,所以我试着不需要依赖ID或名称来表达它,它只适用于任何形式。如果您可以获取生成表单的代码,则在html中输出您想要包含在textarea中的属性(也许客户的某些方法选择哪些方法适用于他们的管理区域)那么'无论是为每个客户制作JS,都可以节省时间。

答案 2 :(得分: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");​