Search code examples
javascripthtmlarraysformsvar

Duplication of form ids

Im using the follwing code, in order to duplicate the inputs of the form and generate new id names, it works fine, but i need to add two divs with classes after the div with clonedSection1 ID, and then it doenst work anymore, do i need to change something in the script? or those divs just will block the normal functioning and i need to erase them?

Here is my code 

<!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>

I figured out that the script is creating the new ids in the second div that i need to generate

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

So i think that I should definitely need to change something in the script, what should it be?

Solution

  • Only changes wrt to your code are :

    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);

    DOM Manipulation with jQuery's .after()

    $("#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>