Add new row (html form) after click 'Add row' button

Question

Hi , I would to ask how to add new row after we click on the 'Add row' button. I found some Javascript code and try to edit it but it doesn't work. Thank you in advance :) Here is the code that I have been using. Would you guys tell what to do or share with me any sources regarding this matter since I haven't found one. There are some similar questions in Stackoverflow but there's no answers there.

The html code :

<h1 class="h3 mb-4 text-gray-800">Requirement Validation Principles</h1>
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <form>
     <div class="form-row">
        <div class="form-group col-md-7">
          <label for="inputName1"></label>
          <input type="Name" class="form-control" id="inputName1" placeholder="Name">
        </div>
        <div class="form-group col">
          <label for="inputPassword1"></label>
          <input type="name" class="form-control" id="inputPassword1" placeholder="Position">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-7">
          <label for="inputName2"></label>
          <input type="Name" class="form-control" id="inputName2" placeholder="Name">
        </div>
        <div class="form-group col">
          <label for="inputPassword2"></label>
          <input type="name" class="form-control" id="inputPassword2" placeholder="Position">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-7">
          <label for="inputName3"></label>
          <input type="Name" class="form-control" id="inputName3" placeholder="Name">
        </div>
        <div class="form-group col">
          <label for="inputPassword3"></label>
          <input type="name" class="form-control" id="inputPassword3" placeholder="Position">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-7">
          <label for="inputName4"></label>
          <input type="Name" class="form-control" id="inputName4" placeholder="Name">
        </div>
        <div class="form-group col">
          <label for="inputPassword4"></label>
          <input type="name" class="form-control" id="inputPassword4" placeholder="Position">
        </div>
      </div>

  </div>

  <button id="btn">Add row</button>

The javascript code :

var count=1;
$("#btn").click(function(){
  
  $("#container").append(addNewRow(count));
  count++;
});

function addNewRow(count){
  var newrow='<div class="row">'+
    '<div class="col-md-4">'+
        '<div class="form-group label-floating">'+
            '<label class="control-label">Name '+count+'</label>'+
            '<input type="text" class="form-control" v-model="act" >'+
        '</div>'+
    '</div>'+
    '<div class="col-md-4">'+
        '<div class="form-group label-floating">'+
            '<label class="control-label">Position '+count+'</label>'+
            '<input type="text" class="form-control" v-model="section">'+
        '</div>'+
    '</div>'+    
'</div>';
  return newrow;
}

Answer 1

Turns out there's a Javascript method called insertRow() .

You'd just need to get a handle on your form by giving it and ID and then accessing that in Javascript:

var table = document.getElementById("[the ID I gave my form");

after that, use the insertRow() method on that table variable and give it a position. Then add cells to the row you just created using insertCell():

var row = table.insertRow(0);
var cell1 = row.insertCell(0);

Answer 2

Instead of using InsertRow() you can alternatively put the button outside your container (the div containing the "container" class) and then use javascript to create your elements.

After all elements are created, you can simply append them to follow your desired structure.

const button = document.getElementById(#btn);

button.addEventListener('click', addRow);

function addRow(event) {
  const container = document.querySelector('.container');

  const row = document.createElement('div');
  row.classList.add('form-row');

  const group = document.createElement('div');
  group.classList.add('form-group');
  group.classList.add('col-md-7'); // Adjust after need.
  
  const label = document.createElement('label');
  label.setAttribute('for', 'myNewInputName');

  const input = document.createElement('input');
  input.setAttribute('type', 'text');
  input.classList.add('form-control');
  input.setAttribute('placeholder', 'My new placeholder');


  // Assemble our structure.
  group.appendChild(label);
  group.appendChild(input);
  row.appendChild(group);
  container.appendChild(row);
}

Here you got a working sandbox of this example:https://codesandbox.io/s/busy-lovelace-9jw2b?file=/src/index.js .

---

Useful links:

appendChild

createElement

querySeleector

Answer 3

the more simple is to use a DOMParser

 const DomParser = new DOMParser() , myForm = document.getElementById('my-form') , bt_Add = document.getElementById('btn-add') ; function newRow(numRow) { let row_N = ` <div class="form-row"> <div class="form-group col-md-7"> <label for="inputName${numRow}"></label> <input type="Name" class="form-control" id="inputName${numRow}" placeholder="Name ${numRow}"> </div> <div class="form-group col"> <label for="inputPassword${numRow}"></label> <input type="name" class="form-control" id="inputPassword${numRow}" placeholder="Position ${numRow}"> </div> </div>` return (DomParser.parseFromString(row_N, 'text/html')).body.firstChild } bt_Add.onclick =()=> { let rowCount = myForm.querySelectorAll('div.form-row').length myForm.appendChild(newRow(++rowCount)) }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <h1 class="h3 mb-4 text-gray-800">Requirement Validation Principles</h1> <div class="jumbotron jumbotron-fluid"> <div class="container"> <form action="xx" id="my-form"> <div class="form-row"> <div class="form-group col-md-7"> <label for="inputName1"></label> <input type="Name" class="form-control" id="inputName1" placeholder="Name 1"> </div> <div class="form-group col"> <label for="inputPassword1"></label> <input type="name" class="form-control" id="inputPassword1" placeholder="Position 1"> </div> </div> </form> </div> <button id="btn-add">Add row</button> <!-- /.container-fluid --> </div>

Useful links: appendChild querySeleectorAll

see also : What does ${} (dollar sign and curly braces) mean in a string in Javascript?

Answer 4

Here is the code that perfectly working.

 <div class="jumbotron jumbotron-fluid" id="dataAdd">
        <div class="container">
            <div class="form-row">
              <div class="form-group col-md-7">
                <label for="inputName1"></label>
                <input type="Name" class="form-control" id="inputName1" placeholder="Name" v-model="name">
              </div>
              <div class="form-group col">
                <label for="inputPassword4"></label>
                <input type="name" class="form-control" id="inputPassword1" placeholder="Position" v-model="position">
              </div>
            </div>
            

    </div>
     <button id="btn">Add row</button>

HTML Code input start with one.

$("#btn").click(function(){

var len=$('#dataAdd .container .form-row').length+1;

//if(len>1)

 $("#dataAdd .container:last").append(' <div class="form-row">'+
                  '<div class="form-group col-md-7">'+
                   ' <label for="inputName'+len+'"></label>'+
                   ' <input type="Name" class="form-control" id="inputName'+len+'" placeholder="Name" v-model="name">'+
                 ' </div>'+
                 ' <div class="form-group col">'+
                 '   <label for="inputPassword4"></label>'+
                 '   <input type="name" class="form-control" id="inputPassword'+len+'" placeholder="Position" v-model="position">'+
                 ' </div>'+
               '</div>');

               });
             
    });

JavaScript Code added HTML in last form-control.

I have Created a working Example you can check here