Click on a little sign of + and appear more inputs

Asked

Viewed 180 times

0

There would be some way for a user to click on a small image with a +sign, 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 this image would appear 3 more inputs but with different Names.

How could I do that?

javascript html

  • I’m marking it as duplicate because the answer there in the other question explains well how to do that. If you have any questions, it may be the case to edit and reopen this question, or make a new one more specific.

2 answers

3

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: https://jsfiddle.net/tx0xf059/

0

<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>
  • 2

    You seem to have misunderstood the question.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.