AnswerBun.com

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

Stack Overflow Asked by ameena on December 12, 2020

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;
}

4 Answers

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

Answered by Ziyad Beg on December 12, 2020

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?

Answered by Mister Jojo on December 12, 2020

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

Answered by PatricNox on December 12, 2020

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);

Answered by NoahRGB on December 12, 2020

Add your own answers!

Related Questions

Anomalous scanf behaviour in C

3  Asked on November 17, 2021 by parth-sarthi-sharma

     

Stop message box on a given situation Excel VBA

1  Asked on November 17, 2021

   

Is there any way to cast timedelta64 to int64 in numba?

2  Asked on November 17, 2021 by anton-philippoff

       

How do I make certain command arguments?

1  Asked on November 16, 2021 by yeti

     

Why does Vec expect &T as the argument to binary_search?

1  Asked on November 16, 2021 by grexis

 

Is it possible to hide data in a bitmap using LockBits?

1  Asked on November 16, 2021 by jeremy-james

       

Repeated filtering on Spark Dataframe?

2  Asked on November 16, 2021 by jeff-gong

     

Can Excel VSTO add-ins call Excel web add-ins?

1  Asked on November 16, 2021 by eli-chen

   

Python List: Replace Double Quotes with Single Quotes

3  Asked on November 16, 2021 by dataplumber

       

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir