How do I dynamically add nested elements to a form?

Question

I want to add a complete div including at least one "sub-div" as shown in my example code. It is quite easy:

I need an "add LP" button on LP-DIV level
I need an "add AP" button on AP-DIV Level
Each new added LP should look like the first one (with 1 AP1)
There should be the Option to remove LP or AP Elements completely when added accidentally.
Dynamically added data is to be stored in a database afterwards (how do I pass the Elements Content within the form ?)

I hope you can help me with this issue. I know the code example is not very nice and not optimized but I needed to reproduce my complex issue within a bigger project for simple understanding.

I already tried jQuery's append and prepend and I found examples showing how to dynamically add elements when you have just one input. I didn't find any example for my issue.

<!doctype html>
<html>
<head>
  <title>Form with nested workpackages</title>
</head>
<body>
  <div class="container">
    <form>
      <div id="LP1div" style="border:1px solid black;background:#888888;width:90%;margin:5px;padding:5px;">LP1 div <br />
        <input type="text" class="form-control" id="lp1nameinput" placeholder="<lp1name>">
        <input type="text" class="form-control" id="lp1typinput" placeholder="<lp1typ>">
        <input type="text" class="form-control" id="lp1summeinput" placeholder="<lp1summe>">

        <div id="LP1AP1div" style="border:1px solid black;background:#81F7F3;width:75%;margin:5px;padding:5px;">LP1 AP1 div <br />
          <input type="text" class="form-control" id="lp1ap1nameinput" placeholder="<lp1ap1name>">
          <input type="text" class="form-control" id="lp1ap1typinput" placeholder="<lp1ap1typ>">
          <input type="text" class="form-control" id="lp1ap1summeinput" placeholder="<lp1ap1summe>">
        </div>
        <div id="LP1AP2div" style="border:1px solid black;background:#58ACFA;width:75%;margin:5px;padding:5px;">LP1 AP2 div <br />
          <input type="text" class="form-control" id="lp1ap2nameinput" placeholder="<lp1ap2name>">
          <input type="text" class="form-control" id="lp1ap2typinput" placeholder="<lp1ap2typ>">
          <input type="text" class="form-control" id="lp1ap2summeinput" placeholder="<lp1ap2summe>">
        </div>
      </div>
      <div id="LP2div" style="border:1px solid black;background:#CCCCCC;width:90%;margin:5px;padding:5px;">LP2 div <br />
        <input type="text" class="form-control" id="lp2nameinput" placeholder="<lp2name>">
        <input type="text" class="form-control" id="lp2typinput" placeholder="<lp2typ>">
        <input type="text" class="form-control" id="lp2summeinput" placeholder="<lp2summe>">
        <div id="lp2AP1div" style="border:1px solid black;background:#81F7F3;width:75%;margin:5px;padding:5px;">lp2 AP1 div <br />
          <input type="text" class="form-control" id="lp2ap1nameinput" placeholder="<lp2ap1name>">
          <input type="text" class="form-control" id="lp2ap1typinput" placeholder="<lp2ap1typ>">
          <input type="text" class="form-control" id="lp2ap1summeinput" placeholder="<lp2ap1summe>">
        </div>
        <div id="lp2AP2div" style="border:1px solid black;background:#58ACFA;width:75%;margin:5px;padding:5px;">lp2 AP2 div <br />
          <input type="text" class="form-control" id="lp2ap2nameinput" placeholder="<lp2ap2name>">
          <input type="text" class="form-control" id="lp2ap2typinput" placeholder="<lp2ap2typ>">
          <input type="text" class="form-control" id="lp2ap2summeinput" placeholder="<lp2ap2summe>">
        </div>
      </div>
    </form>
  </div>
</body>
</html>

Are you sure your question should be tagged with `java`? Remember that [Java != JavaScript](https://stackoverflow.com/a/245069). If you tag your question incorrectly experts observing correct tag may not notice it. — Pshemo, Jul 13 '19 at 19:50

Tyddlywink · Accepted Answer · 2019-07-13T18:10:16.250

This will get you started. You'll need to figure out better logic for determining LP/AP numbering because it's possible to get duplicate Ids if you have LP 1 and LP 2 and remove LP 1 then add an LP you'll get a LP2 repeated.

https://jsfiddle.net/tyddlywink/3vgxfu8w/25/

<!doctype html>
<html>

  <head>
    <title>Form with nested workpackages</title>
  </head>

  <body>
    <div class="container">
      <form>
        <button type="button" id="addLP">Add LP</button>
      </form>
    </div>

    <div id="lpTemplate" style="display: none;">
      <div id="LP-LPtemplate-div" style="border:1px solid black;background:#888888;width:90%;margin:5px;padding:5px;" data-lp-index="-LPtemplate-">LP-LPtemplate- div <br />
        <button type="button" class="removeLP">Remove </button><button type="button" class="addAP">Add AP </button><br/>
        <input type="text" class="form-control" id="lp-LPtemplate-nameinput" placeholder="<lp-LPtemplate-name>">
        <input type="text" class="form-control" id="lp-LPtemplate-typinput" placeholder="<lp-LPtemplate-typ>">
        <input type="text" class="form-control" id="lp-LPtemplate-summeinput" placeholder="<lp-LPtemplate-summe>">
        <div id="lp-LPtemplate-AP-APtemplate-div" style="border:1px solid black;background:#58ACFA;width:75%;margin:5px;padding:5px;">lp-LPtemplate- AP1 div <br />
          <button type="button" class="removeAP">Remove AP</button>
          <input type="text" class="form-control" id="lp-LPtemplate-ap1nameinput" placeholder="<lp-LPtemplate-ap1name>">
          <input type="text" class="form-control" id="lp-LPtemplate-ap1typinput" placeholder="<lp-LPtemplate-ap1typ>">
          <input type="text" class="form-control" id="lp-LPtemplate-ap1summeinput" placeholder="<lp-LPtemplate-ap1summe>">
        </div>
      </div>
    </div>

    <div id="APTemplate" style="display: none;">
      <div id="lp-LPtemplate-AP-APtemplate-div" style="border:1px solid black;background:#58ACFA;width:75%;margin:5px;padding:5px;">lp-LPtemplate- AP-APtemplate- div <br />
        <button type="button" class="removeAP">Remove AP</button>
        <input type="text" class="form-control" id="lp-LPtemplate-ap-APtemplate-nameinput" placeholder="<lp-LPtemplate-ap-APtemplate-name>">
        <input type="text" class="form-control" id="lp-LPtemplate-ap-APtemplate-typinput" placeholder="<lp-LPtemplate-ap-APtemplate-typ>">
        <input type="text" class="form-control" id="lp-LPtemplate-ap-APtemplate-summeinput" placeholder="<lp-LPtemplate-ap-APtemplate-summe>">
      </div>
    </div>
  </body>

</html>

Javascript:

$("#addLP").on("click", function() {
  var self = $(this);
  var currentLPCount = self.parents("form").children("div").length;
  var template = $("#lpTemplate").html();

  template = template.replace(/-LPtemplate-/g, currentLPCount + 1);

  self.parents("form").append(template);
  rebind();


})


var rebind = function() {

  $(".removeLP").off("click");
  $(".removeLP").on("click", function() {
    var self = $(this);

    self.parent("div").remove();

  });
  $(".addAP").off("click");
  $(".addAP").on("click", function() {
    var self = $(this);
    var lpDiv = self.parent("div");
    var currentLPindex = lpDiv.data("lp-index");
    var currentAPCount = lpDiv.children("div").length;
    var template = $("#APTemplate").html();

    template = template.replace(/-LPtemplate-/g, currentLPindex).replace(/-APtemplate-/g, currentAPCount + 1);

    lpDiv.append(template);
    rebind();

  })

  $(".removeAP").off("click");
  $(".removeAP").on("click", function() {
    var self = $(this);

    self.parent("div").remove();

  });


}

Thank you so much. Just what I was Looking for – Harry817 Jul 14 '19 at 05:46 — Harry817, Jul 14 '19 at 05:46

How do I dynamically add nested elements to a form?

1 Answers1