How can i create a text box at each click

Question

I need to create an empty form and using a button to add as many text box as I want. create a text box with each click. I use the Electron framework. Would anyone have an idea ?

Answer 1

You could easily add elements to the DOM:

function createTextBox() {
  var input = document.createElement('input');
  input.type = 'text';
  return input;
}

var form = document.getElementById('myForm');
document.getElementById('addText').addEventListener('click', function(e) {
  form.appendChild(createTextBox());
});

Answer 2

thanks to all for your comments, i finally do it like this, it works

// fcontion pour créer un label
function createLabel ($for, $texte) {
  var label = document.createElement('label');
  label.setAttribute('for', $for);
  var texte = document.createTextNode('Légende');
  label.appendChild(texte);
  return label;
}

// fonction pour une zone de texte
function createInput ($type, $classe, $id) {
  var input = document.createElement('input');
  input.setAttribute('type', $type);
  input.setAttribute('class', $classe);
  input.setAttribute('id', $id);
  return input;
}

// Générer une zone de texte
function createTextBox() {
  var div = document.createElement('div');
  div.setAttribute('class', 'form-group');
  div.appendChild(createLabel('legende', 'Légende'));
  div.appendChild(createInput('text', 'form-control', 'legende'));

  var form = document.getElementById('myForm');
  form.appendChild(div);
  document.getElementById('closeModal').click(); // fermer le popup
}

Answer 3

You should do it in javascript. You can use a library like Jquery to do that. I will note give code here, but if you have problem, show your work and it will be a pleasure to help you debug your code.

There is a lot of way to do it.

A way to do it: You create a button. You add an event listener on it (listening the click event). Then you give a function to that event listener. This function is responsible for adding the textbox. You can look at the append function of jquery to do that. Or implement your own.

Hope this help you, comment if something is not clear, I will add more explanation.