Js to duplicate section of fields and rename for form submission

Question

I need to dynamically add fields to a form page so users can add additional entries of the same form. It's a form to describe units in a subdivision, and the number of units and types vary. I need to add like a plus button using js that will allow them to add fields, and for those field names to be incremented I guess so they are all separate inputs into the handler. What i have for html is as follows

   <!DOCTYPE html>
<html lang="en-US">
  <head>
    <link href="exhibitb.css" rel="stylesheet">
    <meta charset="utf-8">
    <title>Chicago Low-Income Housing Trust Fund</title>
  </head>
  <body>

      <form action="/clihtf.php" method="post">
        <div class="bold2">  Exhibit B</div>
        <div class="bold"> DSU</div>
             <section>
  <p>
        <span>unit: </span>
        <br>
      </label>
      <input type="number" id="totUni" name="totUni" >
          <p>
      <label for="nbr">
        <span>nbr: </span>  
      </label>
             <br>
      <input type="number" id="nbr" name="nbr" >
    </p>
          <p>
      <label for="trsu">
        <span>trsu: </span>  
      </label>
             <br>
      <input type="number" id="trsu" name="trsu">
    </p>
          <p>
      <label for="mtpr">
        <span>Mtpr: </span>  
      </label>
             <br>
      <input type="text" id="mtpr" name="mtpr">
    </p>
          <p>
      <label for="msasu">
        <span>Monthly SAU: </span>  
      </label>
             <br>
      <input type="text" id="msasu" name="msasu">
      <p>
      <label for="ssfga">
        <span>Social SOP (Exhibit F):
          <br> </span>  
      </label>
             <br>
      <input type="text" id="ssfga" name="ssfga">
               <p>
                  <label for="ssfgb">
    Social Service Plan (Exhibit G):
                    <br>
  <input type="text" id="ssfgb" name="ssfgb">

        <p> <button type="submit" value="submit">Submit</button> </p>
           </form>
  </body>

I have tried what is shown here: Adding input fields in Javascript with onclick button and How to create a minus and plus button to update a field? but I'm just not getting it. I just need to literally duplicate all the fields and then have them be submit with separate names. If this is asking too much, I am sorry.

It should be easier to do with jQuery methods. Can you add it to your project ? — EddiGordo, Nov 27 '19 at 07:08
Yeah doing it with jquery is fine. If someone could explain the whole thing to me I will understand going forward — maxpunches, Dec 11 '19 at 21:47

score 0 · Accepted Answer · answered Dec 12 '19 at 08:26

First of all you have to close the section tag with a /section, for example before the /form.

Then you can try with something like this :

var a = $('form section'); // get the section of the form
var b = $(a[0].innerHTML); // get the components to duplicate
b.find('[id]').get().forEach(e => $(e).attr('id', $(e).attr('id') + '_1')); // set "ids" of new components
b.find('[name]').get().forEach(e => $(e).attr('name', $(e).attr('name') + '_1')); // set "names"
b.find('[for]').get().forEach(e => $(e).attr('for', $(e).attr('for') + '_1')); // set "fors"
b.find('button').remove(); // do not copy the submit button
$('form section').append(b); // add new components to the section of the form

Take that example as a basis as it works only for one new bunch of components, you'll have to adapt it for more (or better) implementation.

Very helpful, thank you eddi. This perfectly answers questions about another version I found by giving me another examples with different variables, thus outlining what I need to change or adapt! — maxpunches, Dec 13 '19 at 14:05

Js to duplicate section of fields and rename for form submission

1 Answers1