title: Post For Dynamic Html Form
body: <p>So this is a kind of follow up to another post I made earlier, I have this application I'm working on where I have a dynamic html form, where a user can add and remove rows. I am trying to come up with a way to capture this data when the user posts it, but I am falling short on how to do this. My idea right now is to capture a JavaScript variable from the html page that keeps track of row numbers, and capture the one row at a time, parse the row for an email, then send it to my function. Where I'm at a loss is how to capture the JavaScript variable, and from there how to I separate the rows into separate objects and loop through them. If someone can direct me towards resources that can help me resolve this or if someone can point me in the right direction, I would highly appreciate it! Please find below the html for the dynamic form, the JavaScript with this form and the post mapping for the page (the code for the post mapping is incomplete, this is really where I need aid). Thank you all in advance for any and all help!!!!</p>
  <pre><code>&lt;form th:action=&quot;@{/patienthome/contact-trace-report}&quot; method=&quot;post&quot;&gt;
                              &lt;div class=&quot;card shadow border-start-primary py-2&quot; data-bss-hover-animate=&quot;&quot; style=&quot;width: auto;height: auto; margin-bottom:50px;&quot;&gt;
                                  &lt;div class=&quot;form-group mb-3&quot;&gt;
                                      &lt;div id=&quot;formdiv-1&quot;&gt;
                                          &lt;div class=&quot;row&quot; style=&quot;margin-right:0px;margin-left:0px;padding-top:24px;&quot;&gt;
                                              &lt;div class=&quot;col-md-8 offset-md-1&quot; style=&quot;padding-right: 0px;padding-left: 0px;margin-left: 27.828px;&quot;&gt;
                                                  &lt;p style=&quot;margin-left: 2%;font-family: Roboto, sans-serif;font-size: 47px;text-align: left;&quot;&gt;&lt;strong&gt;Contacted Individuals&lt;/strong&gt;&lt;/p&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
  
  
                                          &lt;!-- Here html for addeable rows --&gt;
                                          &lt;div class=&quot;container&quot;&gt;
                                              &lt;div class=&quot;row clearfix&quot;&gt;
                                                  &lt;div class=&quot;col-md-12 column&quot;&gt;
                                                      &lt;table class=&quot;table table-bordered table-hover&quot; id=&quot;tab_logic&quot;&gt;
                                                          &lt;thead&gt;
                                                              &lt;tr &gt;
                                                                  &lt;th class=&quot;text-center&quot;&gt;
                                                                      #
                                                                  &lt;/th&gt;
                                                                  &lt;th class=&quot;text-center&quot;&gt;
                                                                      First Name
                                                                  &lt;/th&gt;
                                                                  &lt;th class=&quot;text-center&quot;&gt;
                                                                      Last Name
                                                                  &lt;/th&gt;
                                                                  &lt;th class=&quot;text-center&quot;&gt;
                                                                      Email
                                                              &lt;/tr&gt;
                                                          &lt;/thead&gt;
                                                          &lt;tbody&gt;
                                                              &lt;tr id='addr0'&gt;
                                                                  &lt;td&gt;
                                                                  1
                                                                  &lt;/td&gt;
                                                                  &lt;td&gt;
                                                                  &lt;input type=&quot;text&quot; name='firstName'  placeholder='First Name' class=&quot;form-control&quot;/&gt;
                                                                  &lt;/td&gt;
                                                                  &lt;td&gt;
                                                                  &lt;input type=&quot;text&quot; name='lastName' placeholder='Last Name' class=&quot;form-control&quot;/&gt;
                                                                  &lt;/td&gt;
                                                                  &lt;td&gt;
                                                                  &lt;input type=&quot;text&quot; name='email' placeholder='Email Adress' class=&quot;form-control&quot;/&gt;
                                                                  &lt;/td&gt;
                                                              &lt;/tr&gt;
                                                              &lt;tr id='addr1'&gt;&lt;/tr&gt;
                                                          &lt;/tbody&gt;
                                                      &lt;/table&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                              &lt;a id=&quot;add_row&quot; class=&quot;btn btn-default pull-left&quot;&gt;Add Row&lt;/a&gt;
                                              &lt;a id='delete_row' class=&quot;pull-right btn btn-default&quot;&gt;Delete Row&lt;/a&gt;
                                          &lt;/div&gt;
                                          &lt;!-- Here is end of html for addeable rows --&gt;
  
  
                                          &lt;div class=&quot;row d-md-flex d-xxl-flex justify-content-md-center align-items-md-center justify-content-xxl-center align-items-xxl-center&quot; style=&quot;margin-right: 0px;margin-left: 0px;padding-top: 24px;width: auto;&quot;&gt;
                                              &lt;div class=&quot;col-12 col-md-4 offset-md-4 d-xxl-flex justify-content-xxl-center align-items-xxl-center&quot; style=&quot;width: auto;margin-left: 0;padding-left: 0;padding-right: 0px;&quot;&gt;&lt;button class=&quot;btn btn-light btn-lg text-center d-xxl-flex justify-content-xxl-center align-items-xxl-center&quot; style=&quot;margin-left: 0px;width: auto;height: auto;color: rgb(255,252,252);background: rgb(231,74,59);&quot; type=&quot;submit&quot;&gt;Submit &lt;/button&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
  </code></pre>
  <pre><code>&lt;script 
          src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js&quot;&gt;
      &lt;/script&gt;
      &lt;script&gt; 
           var i=1;
      $(document).ready(function(e){    
       $(&quot;#add_row&quot;).click(function()
       {
          $('#addr'+i).html(&quot;&lt;td&gt;&quot;+ (i+1) +&quot;&lt;/td&gt;&lt;td&gt;&lt;input name='firstName&quot;+i+&quot;' type='text' placeholder='First Name' class='form-control input-md'  /&gt;&lt;/td&gt;&lt;td&gt;&lt;input  name='lastName&quot;+i+&quot;' type='text' placeholder='Last Name'  class='form-control input-md'&gt;&lt;/td&gt;&lt;td&gt;&lt;input  name='email&quot;+i+&quot;' type='text' placeholder='Email Address'  class='form-control input-md'&gt;&lt;/td&gt;&quot;);
  
          $('#tab_logic').append('&lt;tr id=&quot;addr'+(i+1)+'&quot;&gt;&lt;/tr&gt;');
          i++; 
       })});
       $(document).ready(function(e){
       $(&quot;#delete_row&quot;).click(function()
       {
           if(i&gt;1)
           {
              $(&quot;#addr&quot;+(i-1)).html('');
              i--;
           }
       })});
      &lt;/script&gt;
  </code></pre>
  <pre><code>//Post Mapping Contract Trace Report
      @PostMapping(&quot;/patienthome/contact-trace-report&quot;)
      public ModelAndView contractTraceReportPost(ModelAndView modelAndView, User user, @RequestParam String email, @RequestParam String firstName, @RequestParam String lastName ) throws IOException, ParseException
      {
  
          Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
          
          Patient patient = patientRepo.findByEmail(authentication.getName());
  
           
          
          
          //Will capture variable i from javascript so we know how many rows to capture 
          //Will try to capture rows as an object, then parse the email from the row
          //Will then use the email to find the patient object and send it tot he list
          while(i&gt;0)
          { 
              //capturing row as Object 
  
              //Parsing Row for email
              
              //Need to capture as many emails as there are rows
              Patient contact =patientRepo.findByEmail(email);
              //Will add the user to the list
              patient.addContactTraceFrom(contact); 
              i--;
          }
  
  
          modelAndView = new ModelAndView(&quot;redirect:/patienthome&quot;); 
  
          modelAndView.addObject(&quot;confirmationMessage&quot;, &quot;Patient Profile Was Updated&quot;);
  
          return modelAndView;   
      }
  </code></pre>