Click on a plus sign + and more inputs appear [duplicate]

Question

Click on a plus sign + and more inputs appear [duplicate]

Navigation

#1 by (3 votes)
#2 by (0 votes)

0

There would be some way for a user to click on a small image with a + sign, to add more inputs to the form. In case I have the following inputs:

Identificação do Responsável da Empresa 1: <input type="text" name="socio1"><br><br>
Número de Identificação Civil do Responsável da Empresa 1: <input type="text" name="socio1"><br><br>
Nif do Responsável da Empresa 1: <input type="text" name="socio1"><br><br>
Identificação do Responsável da Empresa 2: <input type="text" name="socio1"><br><br>

So I would put an image with a + sign and clicking on that image would appear 3 more inputs but with different names.

How could I do this?

javascript html

asked by anonymous 22.03.2016 / 02:12

2 answers

How to do an ordered listing by letter? How to identify a 'delimiter' in a string with php?

score 3 · Answer 1

HTML

<button id="add">
+
</button>
<ul id="list">
</ul>

JavaScript

var add = document.getElementById('add');

add.addEventListener('click', function(e) {
  var newInput = document.createElement('input');
  var newListItem = document.createElement('li');
  newListItem.appendChild(newInput);
  var list = document.getElementById('list');
  list.appendChild(newListItem);
});

Live: link

score 0 · Answer 2

<div style="display:none;padding:15px;border:1px solid #CCC;" id="3inp">
<input name="a" type="text" value="input 1"/>
<input name="b" type="text" value="input 2"/>
<input name="c" type="text" value="input 3"/>
</div>
<div onclick="clicou();" style="padding:15px;border:1px solid #CCC;"> + </div>
<script>
function clicou(){
document.getElementById("3inp").style.display = 'block';
}
</script>