Duplication of form ids Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Duplication of form ids without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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?

Answer

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>
We are here to answer your question about Duplication of form ids - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji