[FIXED] How to maintain count of html container elements and send to Servlet?

Issue

I have parent-child relation between html elements test-case & step-container such that one test case can have multiple steps when user clicks on add +Step and there is also button for adding +TestCase.

User first has to create TestCase and add one or more Steps to that. Both test-case & step-container are enclosed by parent test-case-container.

In JSP:

<div class="buttons">
  <form action="./AddTestCases" method="post"><button id="test" name="test-btn" value="1">ADD TEST CASE</button></form>
</div>

<form class="from-class" action="./AddTestCases" method="post">

  <div id="tc-001" class="test-case-container">

    <div class="test-case">
      <div>
        <label for="tc-name-001" class="test-case-label">TC001</label>
        <button id="tc-delete-001" name="tc-delete-001" class="test-case-del" style="margin-left: 16rem;">DELETE</button>
      </div>
      <textarea id="tc-name-001" name="tc-name-001" class="test-case-name" rows="1" cols="50" placeholder="Test Case Name"></textarea>
    </div>

    <div class="step-container">
      <div>
        <label for="step-name-001" class="step-num-label">Step 1</label>
        <button id="step-delete-001" name="step-delete-001" class="step-del" style="margin-left: 16rem;">DELETE</button>
      </div>
      <textarea id="step-name-001" name="step-name-001" class="step-desc" rows="2" cols="50" placeholder="Step Description"></textarea>
    </div>

    <input type="submit" id="step" value="ADD STEP">
    <button id="done" value="DONE">DONE</button>

  </div>

  <button id="save">SAVE</button>

</form>

I am collecting this data using a from and sending it to a Servlet for processing.

The question is, how do I keep the count to how many Stepseach TestCase has before I send post request to a servlet. I want something like:

{
'tc-01': 2,
'tc-02': 3,
'tc-03': 5,
}

And then send this with/before data so that I can further process it depending on number of steps for each test case has.

Solution

For keeping count of div under your TestCase you can get all the class with name ="test-case-container" then we can loop through this to get count of steps and then finally add that to array .

Demo Code :

var test = new Array(); //frov creating array of object[{},{}]
var test2 = {} //or for creating objects only { ,, }

function add() {
//getting div with class ="test-case-container"
  const tests = document.querySelectorAll('.test-case-container');
  tests.forEach(function(e) {
  //getting id of div
    var ids = e.getAttribute('id');
    //getting count of div under the main div 
    var count = e.getElementsByClassName("step-container").length;
    item = {}
    item[ids] = count;
    test.push(item); //adding item to array
    test2[ids] = count;
  });
  console.log(test) //array of objects [ {} ,{}]
  console.log(test2) //objects { ,, }

  //ajax call to send the array 
  //or submit the form adding these in hidden inputs
}

<div id="tc-001" class="test-case-container">

  <div class="test-case">
    <div>
      <label for="tc-name-001" class="test-case-label">TC001</label>
      <button id="tc-delete-001" name="tc-delete-001" class="test-case-del" style="margin-left: 16rem;">DELETE</button>
    </div>
    <textarea id="tc-name-001" name="tc-name-001" class="test-case-name" rows="1" cols="50" placeholder="Test Case Name"></textarea>
  </div>

  <div class="step-container">
    <div>
      <label for="step-name-001" class="step-num-label">Step 1</label>
      <button id="step-delete-001" name="step-delete-001" class="step-del" style="margin-left: 16rem;">DELETE</button>
    </div>
    <textarea id="step-name-001" name="step-name-001" class="step-desc" rows="2" cols="50" placeholder="Step Description"></textarea>
  </div>
  <div class="step-container">
    <div>
      <label for="step-name-001" class="step-num-label">Step 1</label>
      <button id="step-delete-001" name="step-delete-001" class="step-del" style="margin-left: 16rem;">DELETE</button>
    </div>
    <textarea id="step-name-001" name="step-name-001" class="step-desc" rows="2" cols="50" placeholder="Step Description"></textarea>
  </div>

  <input type="submit" id="step" value="ADD STEP">
  <button id="done" value="DONE">DONE</button>

</div>
<div id="tc-002" class="test-case-container">

  <div class="test-case">
    <div>
      <label for="tc-name-002" class="test-case-label">TC002</label>
      <button id="tc-delete-002" name="tc-delete-002" class="test-case-del" style="margin-left: 16rem;">DELETE</button>
    </div>
    <textarea id="tc-name-002" name="tc-name-002" class="test-case-name" rows="1" cols="50" placeholder="Test Case Name"></textarea>
  </div>

  <div class="step-container">
    <div>
      <label for="step-name-002" class="step-num-label">Step 1</label>
      <button id="step-delete-002" name="step-delete-001" class="step-del" style="margin-left: 16rem;">DELETE</button>
    </div>
    <textarea id="step-name-002" name="step-name-001" class="step-desc" rows="2" cols="50" placeholder="Step Description"></textarea>
  </div>


  <input type="submit" id="step" value="ADD STEP">
  <button id="done" value="DONE">DONE</button>

</div>

<button id="save" onclick="add()">SAVE</button>
                      <!--added onclick-->

Then , you can either put this array to some hidden inputs and then submit your form or you can send these data using ajax to your servlet .

Answered By - Swati