Repeating field inside a Repeating Section using jQuery

Question

I am having a requirement to include a repeating TextArea control (I created small jQuery snippet, that will clone the first textarea and append it to ul on hitting a button and therefore I am calling it as repeating text area control) inside a repeating DIV section (users will be presented with another add button and when that button is clicked it should clone the div and add that div to the main container. Users can hit the button as many times as they want and therefore I am calling it as repeating DIV).

I am not getting any idea of getting this task done. Here is the elaborated requirement. (It's similar to Repeating Field inside a Repeating Section in InfoPath)

Using jQuery I created a repeating textarea controls (TextAreas get added as list items on hitting Add button) and now I will be having a div which will need to have some textboxes and also need to include this repeating textarea field. ID's also need to unique for everything. As I mentioned above, there will be a button after that div and when the user hits that button, the entire div needs to be cloned and needs to be appended to the main container.

You just take that repeating field and iterate over it with TextAreas, then you get the infoPath to the seventh dimension, and that's just right of the Repeating Section inside the box at the top. Once that is done, you could tell us what the heck you're talking about ? — adeneo, Apr 16 '14 at 20:17
Lol @adeneo... I think he's got a `div` that contains a `textarea` wherein clicking an "Add" button adds a new `textarea`. But, and here's the twist, the `div` containing those `textarea`s ALSO can be added by clicking an "Add" button. So, repeating field (read: `textarea`) inside a repeating section (read: `div`).... I think. — jwatts1980, Apr 16 '14 at 20:21
I am really sorry for not being clear on my question. I will be editing it right away. And Jwatts, you exactly described the problem I am facing. thank you. — user3532540, Apr 16 '14 at 20:23

score 1 · Accepted Answer · edited May 23 '17 at 11:44

There are a huge number of different ways to do this. I recently had a project where I had to do this very thing. Here is a working Fiddle of the following code example:

HTML

<div id="container">
    <span id="sholder"></span>
    <br />
    <input type="button" value="Add Section" class="addsection" />
</div>


<div id="section_template" class="template">
    <div class="section">
        <span class="taholder"></span>
        <br />
        <input type="button" value="Add Textarea" class="addtextarea" />
    </div>
</div>

The key concept here is that I created a div section with class template, and in the CSS template is set to display: none;. I use it to more easily create a bigger section of HTML later in the CreateSection() function.

jQuery / javascript

$(function() {
    //add the click handler to add a new section
    $("input.addsection").click(CreateSection);

    //add the click handler for the new section
    //since the buttons are added dynamically, use "on" on the "document" element
    // with the selector for the button we want to watch for.
    $(document).on("click", "input.addtextarea", function() {
        var section = $(this).closest("div.section");
        AddTextarea(section);
    });
});

function CreateSection() {
    var section = $("#section_template div.section").clone();
    var holder = $("#container span#sholder");

    //get the current total number of sections
    var sectionCount = holder.find("div.section").length;

    //create the section id by incrementing the section count
    section.attr("id", "section" + (sectionCount + 1));

    //add a textarea to the section
    AddTextarea(section);

    //add the new section to the document
    holder.append(section);
}

function AddTextarea(section) {
    var sectionID = section.attr("id");
    var holder = section.find("span.taholder");

    //get the current total number of textareas in this section
    var taCount = holder.find("textarea").length;

    //create the new textarea element
    var ta = $(document.createElement("textarea"));

    //create the textarea unique id
    var taID = section.attr("id") + "_textarea" + (taCount + 1);
    ta.attr("id", taID);

    //show the id... can be removed
    ta.val("ID: " + taID);

    //add the textarea to the section
    holder.append(ta);
}

There are several helpful search functions in the above code: closest, find. Also, I'm using the clone function to duplicate that HTML section.

Also of note, I create the new textarea using $(document.createElement("textarea")). document.createElement is the fastest way for JS to create new HTML DOM objects.

And a bit of CSS for the example

div.template {
    display: none;
}

div.section {
    border: 1px solid black;
}

div.section textarea {
    display: block;
}

This example keeps the IDs unique as you can see in the JSFiddle. However, reading those fields if they are posted to the server is an answer to another question.

Thank you soooo much. I am trying in the same line (hidden div and cloning that guy) but couldn't get it to work because of my bad Jquery programming abilities. I will make you of this code for achieving my requirement and will mark this as answer once I am done. Thanks again Watts. — user3532540, Apr 16 '14 at 21:08

Repeating field inside a Repeating Section using jQuery

1 Answers1