表单ID重复

时间：2019-09-18 13:45:52

标签： javascript html arrays forms var

我正在使用下面的代码，以便复制表单的输入并生成新的id名称，它可以正常工作，但是我需要在具有clonedSection1 ID的div之后添加两个div，并添加类，然后它不再起作用，我需要更改脚本中的某些内容吗？还是那些div会阻止正常功能，我需要删除它们？

这是我的代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
</head>

<body>
<form id="myForm">
 <div id="clonedSection1" class="clonedSection">


   <!--    here goes   <div class="container contain2 marco">  
<div class="row row-centered ">-->

     <p>Name: <input type="text" name="name" id="name" /></p>
     <p>Product Description:</p>
     <p><textarea rows="10" cols="50" name="desc" id="desc"></textarea></p>
     <p>Brand Name: <input type="text" name="brand" id="brand" /></p>
     <p>Product Code Number: <input type="text" name="code" id="code" /></p>
     <p>West Texas Co-op Bid Product Number (if different from the Product Code Number): <input type="text" name="coop" id="coop" /></p>
     <p>Commodity processing availability: <input type="checkbox" name="yes" id="yes" value="Yes"> Yes <input type="checkbox" name="no" id="no" value="No"> No</p>
     <p>Commodity processing code number (if applicable): <input type="text" name="comm" id="comm" /></p>



     <!--   
   </div>

   </div>  -->


 </div>
 <div>
     <input type="button" id="btnAdd" value="add another name" />
     <input type="button" id="btnDel" value="remove name" />
 </div>
</form>
<script type="text/javascript">
 $(document).ready(function() {
     $("#btnAdd").click(function() {
         var num     = $(".clonedSection").length;
         var newNum  = new Number(num + 1);

         var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);

         newSection.children(":first").children(":first").attr("id", "name" + newNum).attr("name", "name" + newNum);
         newSection.children(":nth-child(3)").children(":first").attr("id", "desc" + newNum).attr("name", "desc" + newNum);
         newSection.children(":nth-child(4)").children(":first").attr("id", "brand" + newNum).attr("name", "brand" + newNum);
         newSection.children(":nth-child(5)").children(":first").attr("id", "code" + newNum).attr("name", "code" + newNum);
         newSection.children(":nth-child(6)").children(":first").attr("id", "coop" + newNum).attr("name", "coop" + newNum);
         newSection.children(":nth-child(7)").children(":first").attr("id", "yes" + newNum).attr("name", "yes" + newNum);
         newSection.children(":nth-child(7)").children(":nth-child(2)").attr("id", "no" + newNum).attr("name", "no" + newNum);
         newSection.children(":nth-child(8)").children(":first").attr("id", "comm" + newNum).attr("name", "comm" + newNum);

         $(".clonedSection").last().append(newSection)

         $("#btnDel").attr("disabled","");

         if (newNum == 5)
             $("#btnAdd").attr("disabled","disabled");
     });

     $("#btnDel").click(function() {
         var num = $(".clonedSection").length; // how many "duplicatable" input fields we currently have
         $("#clonedSection" + num).remove();     // remove the last element

         // enable the "add" button
         $("#btnAdd").attr("disabled","");

         // if only one element remains, disable the "remove" button
         if (num-1 == 1)
             $("#btnDel").attr("disabled","disabled");
     });

     $("#btnDel").attr("disabled","disabled");
 });
</script>

</body>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
</html>

我发现该脚本正在我需要生成的第二个div中创建新的ID 

<div class="row row-centered " id="name2" name="name2">

所以我认为我绝对应该更改脚本中的某些内容，这应该是什么？

1 个答案:

答案 0 :(得分：0)

仅对代码进行的更改是：

var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
var newClonedSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
var newSection = newClonedSection.find('div').last();
...
...
...
$(".clonedSection").last().after(newClonedSection);

使用jQuery的.after()

进行DOM操作 

$("#btnAdd").click(function() {
    var num     = $(".clonedSection").length;
    var newNum  = new Number(num + 1);

    var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);

    var newClonedSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
    var newSection = newClonedSection.find('div').last();


    newSection.children(":first").children(":first").attr("id", "name" + newNum).attr("name", "name" + newNum);
    newSection.children(":nth-child(3)").children(":first").attr("id", "desc" + newNum).attr("name", "desc" + newNum);
    newSection.children(":nth-child(4)").children(":first").attr("id", "brand" + newNum).attr("name", "brand" + newNum);
    newSection.children(":nth-child(5)").children(":first").attr("id", "code" + newNum).attr("name", "code" + newNum);
    newSection.children(":nth-child(6)").children(":first").attr("id", "coop" + newNum).attr("name", "coop" + newNum);
    newSection.children(":nth-child(7)").children(":first").attr("id", "yes" + newNum).attr("name", "yes" + newNum);
    newSection.children(":nth-child(7)").children(":nth-child(2)").attr("id", "no" + newNum).attr("name", "no" + newNum);
    newSection.children(":nth-child(8)").children(":first").attr("id", "comm" + newNum).attr("name", "comm" + newNum);

    $(".clonedSection").last().after(newClonedSection);
    $("#btnDel").attr("disabled", "");
    if (newNum == 5)
        $("#btnAdd").attr("disabled", "disabled");
});

$("#btnDel").click(function() {
    var num = $(".clonedSection").length; // how many "duplicatable" input fields we currently have
    $("#clonedSection" + num).remove();     // remove the last element

    // enable the "add" button
    $("#btnAdd").attr("disabled","");

    // if only one element remains, disable the "remove" button
    if (num-1 == 1)
        $("#btnDel").attr("disabled", "disabled");
});

$("#btnDel").attr("disabled", "disabled");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<html>
<body>
<form id="myForm">
 <div id="clonedSection1" class="clonedSection">
 <div class="container contain2 marco">  
 <div class="row row-centered ">

     <p>Name: <input type="text" name="name" id="name" /></p>
     <p>Product Description:</p>
     <p><textarea rows="10" cols="50" name="desc" id="desc"></textarea></p>
     <p>Brand Name: <input type="text" name="brand" id="brand" /></p>
     <p>Product Code Number: <input type="text" name="code" id="code" /></p>
     <p>West Texas Co-op Bid Product Number (if different from the Product Code Number): <input type="text" name="coop" id="coop" /></p>
     <p>Commodity processing availability: <input type="checkbox" name="yes" id="yes" value="Yes"> Yes <input type="checkbox" name="no" id="no" value="No"> No</p>
     <p>Commodity processing code number (if applicable): <input type="text" name="comm" id="comm" /></p>
</div>
   </div>

 </div>
 <div>
     <input type="button" id="btnAdd" value="add another name" />
     <input type="button" id="btnDel" value="remove name" />
 </div>
</form>

</body>
</html>

相关问题
最新问题