如何将动态创建的表单字段的值传递给文本区域

Question

我正在尝试使用动态表单元素“添加”/“删除”功能创建一个简单的表单。最终，一旦条目完成，我希望表单结果显示在文本区域中。

我在这个论坛上进行了搜索，并设法拼凑出一些可以实现一些但不是我全部目标的东西。它将动态地制作我的表单元素，并删除它们。但是，当我尝试在我的 textarea 中显示结果时，只显示第一个选项。此外，当我在文本输入中输入内容时，所有后续的新字段都预先填充了该用户文本。最后，由于我的元素之一是选择框，我想知道是否有人更好地了解如何让用户在 20-30 个选项中进行选择？

我的 HTML

    <form name="builder">
    <fieldset>
         <h2>Select your results</h2>

        <div id="IPOX">
            <p>
                <select name="column1" id="col1">
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                    <option value="D">D</option>
                    <option value="E">E</option>
                    <option value="F">F</option>
                    <option value="Z">Z</option>
                </select>
                <select name="column2" id="col2">
                    <option value="POS">POS</option>
                    <option value="NEG">NEG</option>
                    <option value="EQUIV">EQUIV</option>
                </select>
                <input type="text" name="usercomm" id="usercomm">
            </p>
        </div>
        <p><span class="add">Add another row</span>

        </p>
    </fieldset>
    <br>
    <br>
    <p>
        <input type="button" id="submit" value="Done!" onclick="printIHC()" />
    </p>
</form>

我的 js

    $(window).load(function () {
    $(function () {
        var defaults = {
            'usercomm': '-'
        };

        // separating set and remove
        // note that you could add "defaults" as an arg if you had different
        // defaults for different fieldsets
        var setDefaults = function (inputElements) {
            $(inputElements).each(function () {
                var d = defaults[this.name];
                if (d) {
                    // set with jQuery
                    // we don't need the data - just check on the class
                    $(this).val(d)
                        .addClass('default_value');
                }
            });
        };

        var removeDefaults = function (inputElements) {
            $(inputElements).each(function () {
                if ($(this).hasClass('default_value')) {
                    $(this).val('')
                        .removeClass('default_value');
                }
            });
        };

        setDefaults(jQuery('form[name=builder] input'));

        $("span.add").click(function () {
            // get the correct fieldset based on the current element
            var $fieldset = $(this).closest('fieldset');
            var $inputset = $('p', $fieldset)
                .first()
                .clone()
                .insertBefore($('p', $fieldset).last());
            // add a remove button
            $inputset.append('<span class="remove">Remove</span>');
            setDefaults($('input', $inputset));
            // return false; (only needed if this is a link)
        });

        // use delegate here to avoid adding new 
        // handlers for new elements
        $('fieldset').delegate("span.remove", {
            'click': function () {
                $(this).parent().remove();
            }
        });

        // Toggles 
        $('form[name=builder]').delegate('input', {
            'focus': function () {
                removeDefaults($(this));
            },
                'blur': function () {
                // switch to using .val() for consistency
                if (!$(this).val()) setDefaults(this);
            }
        });
    });     
});
// Print values to textarea
        function printIHC() {
            var myIHC = document.getElementById('output');
            var selectAb = document.getElementById('col1');
            selectAb.onchange = this.value;
            var selectVal = document.getElementById('col2');
            selectVal.onchange = this.value;
            var userTxt = document.getElementById('usercomm');

            ihcOut = 'Column 1\tValue \tComments\n---------------------------------\n' + selectAb.value + '\t\t' + selectVal.value + '\t' + userTxt.value + '\n';
            myIHC.value += ihcOut;
        }

我不是程序员，所以我不知道我是否应该混合使用 javascript 和 jquery。我也有一种感觉，当表单元素被动态创建时，它们对打印脚本显得无声。最后，与此相关的许多主题都涉及 PHP 脚本，由于我不完全了解它们是如何工作的，因此我想避免使用这些脚本。

我试着把它做成一个 jsfiddle，如果这样更容易查看的话 - http://jsfiddle.net/Vqzk9/

感谢您的帮助

Answer 1

您应该做的第一件事是将col1,col2,usercomm 从id 更改为class。因为id 是独一无二的。

然后我写一个新的printthis如下：

function printthis() {
   var ihcOut = 'Column 1\tValue \tComments\n---------------------------------\n';
         $('fieldset p').each(function(){
             if($(this).find('.add').length>0)return;
            var selectAb = $(this).find('.col1').val();
            var selectVal = $(this).find('.col2').val();
           var userTxt = $(this).find('.usercomm').val();
            ihcOut += selectAb + '\t\t' + selectVal + '\t' + userTxt + '\n';
        });
        $('#output').val(ihcOut);
  }

这里是 jsfiddle http://jsfiddle.net/Vqzk9/1/