Olá, eu estou utilizando um script para adicionar campos de input em um div:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
// Adicionar curso
$(document).ready(function(){
var maxField = 15; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div style="position:relative; height:100px;"><div><div class="form-group" style="position:absolute;top:-50px;"><div class="field_wrapper"><div class="form-group" style="width:470px; position:absolute;"><label>Instituição</label><input type="text" class="form-control" name="field_name[]" value="" placeholder="Nome e sede"/></div><div class="form-group" style="width:300px; position:absolute; left:510px;"><label>Curso</label><input type="text" class="form-control" name="field_name[]" value=""/></div><div class="form-group" style="width:170px; position:relative; left:790px;"><label>Conclusão</label><select class="form-control"><option></option><option>Concluido em:</option><option>Espero concluir em:</option></select></div><input class="form-control" placeholder="Ano" style="width:75px; position:relative; left:970px; top:-49px;" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" style="position:absolute; top:60px;" title="Remove field">Remover Curso</a></div></div>'; //New input field html
var contCurso = 1; //Initial field counter is 1
$(addButton).click(function(){ //Once add button is clicked
if(contCurso < maxField){ //Check maximum number of input fields
contCurso++; //Increment field counter
$(wrapper).append(fieldHTML); // Add field html
}
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
contCurso--; //Decrement field counter
});
});
e o formulário inicial:
<a href="javascript:void(0);" class="add_button" title="Add field">Adicionar Cursos</a>
<div>
<div class="form-group" style="width:470px; position:absolute;">
<label>Instituição</label>
<input type="text" class="form-control" name="field_name[]" value="" placeholder="Nome e sede"/>
</div>
<div class="form-group" style="width:300px; position:absolute; left:510px;">
<label>Curso</label>
<input type="text" class="form-control" name="field_name[]" value=""/>
</div>
<div class="form-group" style="width:170px; position:relative; left:790px;">
<label>Conclusão</label>
<select class="form-control">
<option></option>
<option>Concluido em:</option>
<option>Espero concluir em:</option>
</select>
</div>
<input class="form-control" placeholder="Ano" style="width:75px; position:relative; left:970px; top:-49px;" name="field_name[]" value=""/>
</div>
O script funciona, mas estou com um problema visual no site. Estou trabalhando com um template pronto que conta com vários css's externos. Então para modificar algumas propriedades da classe, precisei usar styles
. Quando Adicionar Botão é clicado 5 vezes por exemplo, ele cria cinco desses formulários um em baixo do outro. Mas se excluo o quinto, e crio novamente, ele vai parar na posição do sexto.
Acredito que o problema esteja nos styles, mas não conheço muito essa parte, será que podem me ajudar a resolver esse problema? Agradeço desde já!