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

Question

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

我在这个论坛上进行了搜索，并设法将一些可以实现但并非全部目标的事情整合在一起。 它将动态创建我的表单元素，并将其删除。 但是，当我尝试在文本区域中显示结果时，仅显示第一个选项。 此外，当我在文本输入中输入内容时，所有后续新字段都将使用该用户文本预先填充。 最后，由于我的一个要素是选择框，我想知道是否有人想让用户更好地选择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/