Today I and a friend think of developing a system for resumes registration, but I need to click a link to add another 1 block of inputs each time it is clicked. I tried searching, and found no nice fonts, ie I did not know how to search.
See the image below for a better understanding:
Note: I'm using Codeigniter if it has any helper that does this.
See:
<input> without attribute name , they will not even be submitted. <input> with the same value in the name attribute, only the last one will be submitted. What you are trying to do deserves a little more care, it is not simply to insert a <input> behind the other. In fact, it may even be, as long as you do not need to retrieve this data later and I believe that the goal is not that.
What you can do is:
<input> with attribute name being an array. On the server you for iterating over this array and retrieving the data. For example: <input type='text' name='empresas[]' placeholder='Nome da empresa 1'/>
<input type='text' name='empresas[]' placeholder='Nome da empresa 2'/> <!-- s/ problemas -->
Or else ...
name attribute being empresa-x , where x is the "field index" and this number must be incremented each time a new input is entered in the form. In this case you should clone the last element, increment the value of x and insert at the end of the form. <input type='text' name='empresa-1' placeholder='Nome da empresa 1'/>
<input type='text' name='empresa-2' placeholder='Nome da empresa 2'/>
<!-- ... -->
The first one is simpler, since you only need to clone the element. The second one is a bit more annoying to do because it is necessary to increment the index number and replace all name attributes, but nothing complicated. It will depend on how you want to get this data on the server later.
$(function(){
$('button').on('click', function(){
$('.info-block:first').clone().insertAfter('.info-block:last');
});
});.info-block { padding: 10px; border: 1px solid #ccc }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass='container'><!--blocoqueseráclonado--><divclass='info-block'><inputtype='text'name='empresas[]'placeholder='Empresa'/><inputtype='text'name='escolas[]'placeholder='Escola'/><!--outroscampos...--></div></div><button>Adicionar+campos</button>Inthissecondexample,tomakeiteasiertocontroltheindex,Icreateda<span>asifitwereacounter.Throughititispossibletoobtainthelastindextoincrementitandtoclonetheblock.
$(function(){
$('button').on('click', function(){
var $bloco = $('.info-block:last').clone(),
indice = parseInt($bloco.find('span').text()) + 1;
$bloco.find('span').text(indice);
$bloco.find('input[name^="empresa-"]').attr('name', 'empresa-' + indice);
$bloco.find('input[name^="escola-"]').attr('name', 'escola-' + indice);
// Se ouver outros inputs, altera o atributo name deles com o índice
$bloco.insertAfter('.info-block:last');
});
});.info-block { padding: 10px; border: 1px solid #ccc }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<!-- bloco que será clonado -->
<div class='info-block'>
<span>1</span>
<input type='text' name='empresa-1' placeholder='Empresa' />
<input type='text' name='escola-1' placeholder='Escola' />
<!-- outros campos... -->
</div>
</div>
<button>Adicionar + campos</button>Assuming the html:
<div class='dados'>
<input type="text" value="" />
</div>
<a href="javascript:void(0);" id="btnAdd">+</a>
By clicking the button, through a jQuery event, you solve the problem:
$("#btnAdd").click(function() {
$(".dados").append('<input type="text" value="" />');
});
Test with this fiddle