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

how to pass values of dynamically created form fields to a textarea

本文关键字:值传 区域 文本 字段 表单 动态 创建      更新时间:2023-09-26

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

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

我的网页

    <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脚本,我想避免使用PHP脚本,因为我不完全了解这些脚本是如何工作的。

我试图把它变成一个jsfiddle,如果这更容易查看 - http://jsfiddle.net/Vqzk9/

感谢您的任何帮助

你应该做的第一件事是将col1col2usercommid更改为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/