使用 JQUERY 以动态创建的形式命名两个不同的输入答案

【问题标题】：Naming two different inputs in a dynamically created form with JQUERY使用 JQUERY 以动态创建的形式命名两个不同的输入
【发布时间】：2014-08-18 18:50:15
【问题描述】：

我正在编写一个程序，它需要将文本框和文本区域动态添加到表单中。为此，我正在使用克隆功能。不幸的是，我似乎无法弄清楚如何让每个盒子都有一个唯一的 ID。这是我的 Jquery：

<script type="text/javascript"> 
$(document).ready(function() {

$('#addButton').click(function() {
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);

var newElem = $('#form1').clone().attr('id', 'form' + newNum);
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name');

$('#form' + num).after(newElem);

$(newElem).append(
   $(document.createElement('input')).attr({
       id:    'myCheckbox'  + newNum
      ,name:  'myCheckbox' + newNum
      ,value: 'myValue'
      ,type:  'checkbox'
   })
);
});

})
</script>

还有我的 HTML：

 <form method="post" form action="save3.php">
 <div name="forms" id="form1" class="clonedInput" width="800px">
     <label></label><textarea rows="4" cols="50" id="text1" class="text" name="text[]"      ></textarea>
 <label></label><input type="text" id="title1" class="title" name="title[]">
 </div>
 </form>

提前感谢您的帮助

【问题讨论】：

不确定这是否是复制/粘贴问题，但您在脚本末尾缺少 });....
还有无效的HTML，form action=" .. "???
而且它似乎确实有效 -> jsfiddle.net/adeneo/Lnbt92uj
这些是复制和粘贴问题，抱歉。我有更多代码，但我的问题是我需要文本框和文本区域 ID 不同。如果您查看 JS Fiddle，它们的 ID 均为“text1”

标签： javascript jquery html forms dynamic

【解决方案1】：

您的问题似乎是您只是重命名了第一个孩子的属性值，即正确获取 id 属性值“name2”的标签：

newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name');

但我看不到任何以相同方式处理文本区域和输入字段的代码。有几种方法可以做到这一点，其中一种是：

$('#form' + newNum + ' textarea').attr('id','text' + newNum);
$('#form' + newNum + ' input[type="text"]').attr('id','title' + newNum);

见http://jsfiddle.net/bk40jd9f/1/

【讨论】：

【解决方案2】：

您的代码错误：http://jsfiddle.net/mig1098/bk40jd9f/

$(document).ready(function() {

$('#addButton').click(function() {

var num = $('.clonedInput').length;
var newNum = new Number(num + 1);

var newElem = $('#form1').clone().attr('id', 'form' + newNum);
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name');

$('#form' + num).after(newElem);

$(newElem).append(
   $(document.createElement('input')).attr({
       id:    'myCheckbox'  + newNum
      ,name:  'myCheckbox' + newNum
      ,value: 'myValue'
      ,type:  'checkbox'
      })
   );
 });

})

【讨论】：