Create fields with certain placeholders in a row

Question

With the help of the comunity (Thanks all of you !) I manage to create 3 fields at a time in a single row, anytime the user needs it. The thing is that everytime it create the fields, the placeholder is always "Another field". I would like that instead of that says Infrastracture, Time, Monthly Cost", but I have no clue how to do that.

Thank you Kindly !

Html Code:



  
    
    
    

    
    
    
    
    

    
    

    
    Hello, world!
  
  
  
      
      
          Factibilidad Técnica y Operativa
          Análisis de Infraestructura

          
        
            

              
                
              

              
                
              

              
                  
              
                
            
        
        
          
          
            Añadir
            Eliminar

JavaScript Code:

var survey_options = document.getElementById('campo');
var add_more_fields = document.getElementById('add_more_fields');
var remove_fields = document.getElementById('remove_fields');

function Añadir(){
    var newDiv = document.createElement('div');
    newDiv.setAttribute('class', 'col-lg-4 mb-2')

    var newField = document.createElement('input');
    newField.setAttribute('type','text');
    newField.setAttribute('class','form-control');
    newField.setAttribute('placeholder','Another Field');
    survey_options.appendChild(newDiv);
    newDiv.appendChild(newField);
 
}

function createTwoInput(){
  Añadir();
  Añadir(); 
  Añadir();  
}


function Eliminar(){
    var input_tags = survey_options.getElementsByTagName('input');
    if(input_tags.length > 2) {
        survey_options.removeChild(input_tags[(input_tags.length) - 1]);
    }
}

user_1772933 · Answer

One options is to pass into your function the number of items you want to create, and pull the placeholder from an array, like this:

let survey_options = document.querySelector('.survey_options')

function Añadir(num_create) {
  let placeholders = ["Infrastracture", "Time", "Monthly Cost"];
  for (let x = 0; x < num_create; x++) {
    var newDiv = document.createElement('div');
    newDiv.setAttribute('class', 'col-lg-4 mb-2')

    var newField = document.createElement('input');
    newField.setAttribute('type', 'text');
    newField.setAttribute('class', 'form-control');
    newField.setAttribute('placeholder', placeholders[x]);
    survey_options.appendChild(newDiv);
    newDiv.appendChild(newField);
  }

}

Añadir(3);

user_2813224 · Answer

Make a function that can add or remove a .row depending on exactly whitch button was clicked.

Event Delegation

Register the 'click' event to an element that contains all of the elements you need to listen for events on. This element (ex.
) is called the listener and once the event (ex. 'click') triggers, the event handler (ex. addRem()) will run.
```
const ui = document.forms.infra;
ui.onclick = addRem;
```
The event handler addRem(event) passes the Event Object (ex. (event)) which has a property that helps determine what the user clicked called .target.
```
const clicked = event.target;
if (clicked.matches('#add')) {...}
else if (clicked.matches('#rem')) {...}
else {...}
```
When 'button#add' is clicked, instead of writing a line of code for each and every attribute, element, etc. create a htmlString that represents everything that needs to be rendered. In addRem() it's row variable which is rendered into real HTML by .insertAdjacentHTML() method.
```
const row = ``Everything within``;
main.insertAdjacentHTML('beforeEnd', row);
```

When 'button#rem' is clicked, it removes the last .row unless there's only one left.

let rows = main.querySelectorAll('.row');
...&& rows.length > 1) {
rows[rows.length-1].remove();

Example 1

const ui = document.forms.infra;
const io = ui.elements;

ui.onclick = addRem;

function addRem(event) {
  const clicked = event.target;
  const main = document.querySelector('.container');
  let rows = main.querySelectorAll('.row');
  
  if (clicked.matches('#add')) {
    const row = `  
   
   
   
 
 `;
    main.insertAdjacentHTML('beforeEnd', row);
  } else if (clicked.matches('#rem') && rows.length > 1) {
    rows[rows.length-1].remove();
  } else {
    return false;
  }
};

.btn-group {
  float: right;
}





  
  
  
  
  Hello, world!




  
    Factibilidad Técnica y Operativa
    Análisis de Infraestructura

Example 2

Variation of adding .row using .cloneNode()

const ui = document.forms.infra;
const io = ui.elements;

ui.onclick = addRem;

function addRem(event) {
  const clicked = event.target;
  const main = document.querySelector('.container');
  let rows = main.querySelectorAll('.row');
  
  if (clicked.matches('#add')) {
    let row = rows[0].cloneNode(true);
    let inputs = row.querySelectorAll('input');
    inputs.forEach(input => input.value = '');
    main.appendChild(row);
  } else if (clicked.matches('#rem') && rows.length > 1) {
    rows[rows.length-1].remove();
  } else {
    return false;
  }
};

.btn-group {
  float: right;
}





  
  
  
  
  Hello, world!




  
    Factibilidad Técnica y Operativa
    Análisis de Infraestructura

Create fields with certain placeholders in a row

2 Answers

Event Delegation

Example 1

Example 2