Javascript 如何将动态创建的表单字段的值传递给textarea

我正在尝试创建一个带有动态表单元素“add”/“remove”特性的简单表单。最后，一旦条目完成，我希望表单结果显示在文本区域中

我在这个论坛上搜索，并设法拼凑出一些东西来实现一些目标，但不是全部目标。它将动态生成并删除我的表单元素。但是，当我尝试在文本区域中显示结果时，仅显示第一个选项。此外，当我在文本输入中输入某些内容时，所有后续的新字段都会预先填充该用户文本。最后，由于我的元素之一是selectbox，我想知道是否有人更了解如何让用户在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>

选择您的结果

A.
B
C
D
E
F
Z
销售时点情报系统
负数
等价物

添加另一行

我的js

$（窗口）。加载（函数（）{
$（函数（）{
var默认值={
“usercomm”：“-”
};
//分离设置并移除
//请注意，如果您有不同的参数，可以将“defaults”添加为arg
//不同字段集的默认值
var setDefaults=函数（inputElements）{
$（inputElements）。每个（函数（）{
var d=默认值[this.name]；
如果（d）{
//使用jQuery设置
//我们不需要这些数据，只要检查一下课堂就可以了
$（此）.val（d）
.addClass（“默认值”）；
}
});
};
var removeDefaults=函数（inputElements）{
$（inputElements）。每个（函数（）{
if（$（this）.hasClass（'default_值'））{
$（this.val（“”）
.removeClass（“默认值”）；
}
});
};
setDefaults（jQuery（'form[name=builder]input'）；
$（“span.add”）。单击（函数（）{
//根据当前元素获取正确的字段集
var$fieldset=$（this.nexist（'fieldset'）；
变量$inputset=$（'p'，$fieldset）
.first（）
.clone（）
.insertBefore（$（'p'，$fieldset.last（））；
//添加删除按钮
$inputset.append（'Remove'）；
setDefaults（$（'input'，$inputset））；
//返回false；（仅当这是链接时才需要）
});
//在此处使用委托以避免添加新的
//新元素的处理程序
$（'fieldset'）.delegate（“span.remove”{
“单击”：函数（）{
$（this.parent（）.remove（）；
}
});
//切换
$（'form[name=builder]'）。委托（'input'{
“焦点”：函数（）{
移除默认值（$（此））；
},
“模糊”：函数（）{
//切换到使用.val（）以保持一致性
if（！$（this.val（））setDefaults（this）；
}
});
});     
});
//将值打印到文本区域
函数printIHC（）{
var myIHC=document.getElementById（'output'）；
var selectAb=document.getElementById（'col1'）；
选择ab.onchange=this.value；
var selectVal=document.getElementById（'col2'）；
选择val.onchange=this.value；
var userTxt=document.getElementById（'usercomm'）；
ihcOut='第1列\tValue\t注释\n---------------------------------------\n'+selectAb.value+'\t\t'+selectVal.value+'\t'+userTxt.value+'\n'；
myIHC.value+=ihcOut；
}

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

我试着让它成为一个JSFIDLE，如果它更容易查看的话-

---

感谢您的帮助

您应该做的第一件重要事情是将

col1

，

col2

，

usercomm

从

id

更改为

class

。因为

id

是唯一的

然后我编写一个新的

打印此
，如下所示：

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
你能解释一下你的问题吗？当你克隆元素时，你可以重用元素上的
id
值。
id
唯一地标识html文档中的一个元素，因此不能有两个元素具有相同的
id
。改用类，或者重新分配ID。嗨，这真的很管用。我看到，当我在旧HTML中添加选项时，您不会区分输入，因为它们都带有相同的ID。在打印函数中，如果我尝试将CSS样式应用于输入字段，会发生什么情况。也就是说，您的代码查找类“col1”和“col2”。如果我添加了一个CSS元素，使我的输入看起来像
？根据console调试器，该函数使我无法继续调整输入。
也可以通过使用
.find（'col1'）
找到。你可以看到，谢谢。我尝试用所选的jQuery插件修改我的选择框-。最初一切正常，但只有第一个实例正常工作。随后创建的元素被冻结。附加的CSS元素是问题所在吗？这是我的小提琴
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);
  }