Clone data insertion box with jQuery
Wanted to make the interface below work with js(jQuery) :
I am using the CSS foundation framework to develop this project. However, I do not know how to make a clone using the jQuery of this combo where the inputs are. In fact I want the moment the user clicks on the more he dynamically adds One More Line equal to the first to gives input in more records.
The HTML of this record is below:
<form action="">
<div class="row box_pergunta">
<div class="large-8 columns">
<label>Mensagem:</label>
<input name="pergunta" type="text">
</div>
<div class="large-2 columns">
<label>Ordem</label>
<select name="">
<option value="antes">Antes</option>
<option value="depois">Depois</option>
</select>
</div>
<div class="large-2 columns">
<input type="button" class="button tiny success btn_remove" value="Remover" style="margin: 1.375rem 0 0 1.5625rem; ">
</div>
</div>
</form>
I'm already using jQuery in the project.
2 answers
An implementation suggestion would be to have a hidden template, and when the user clicks the cloner button, clone with jQuery and do append in form, example:
HTML
<form action="">
<div class="small-12 columns text-right">
<button type="button" class="small tiny alert clonador">Mais</button>
</div>
<div class="row box_pergunta hide">
<div class="small-8 columns">
<label>Mensagem:</label>
<input name="pergunta" type="text"/>
</div>
<div class="small-2 columns">
<label>Ordem</label>
<select name="">
<option value="antes">Antes</option>
<option value="depois">Depois</option>
</select>
</div>
<div class="small-2 columns">
<input type="button" class="button tiny success btn_remove" value="Remover" style="margin: 1.375rem 0 0 1.5625rem; "/>
</div>
</div>
<div class="row box_pergunta">
<div class="small-8 columns">
<label>Mensagem:</label>
<input name="pergunta" type="text"/>
</div>
<div class="small-2 columns">
<label>Ordem</label>
<select name="">
<option value="antes">Antes</option>
<option value="depois">Depois</option>
</select>
</div>
<div class="small-2 columns">
<input type="button" class="button tiny success btn_remove" value="Remover" style="margin: 1.375rem 0 0 1.5625rem; "/>
</div>
</div>
</form>
JQuery
$('.clonador').click(function(){
//clona o modelo oculto, clone(true) para copiar também os manipuladores de eventos
$clone = $('.box_pergunta.hide').clone(true);
//remove a classe que oculta o modelo do elemento clonado
$clone.removeClass('hide');
//adiciona no form
$('form').append($clone);
});
//Para remover
$('.btn_remove').click(function(){
$(this).parents('.box_pergunta').remove();
});
Note: you will also need to manipulate the names of the form elements, dynamically, or use as array -> name="mensagem[]"
You can clone the existing element like this:
Jquery:
$('.clonador').click(function(e){
e.preventDefault();
$('.box_pergunta:first').clone().appendTo($('form')); // clona o primeiro elemento e adiciona ao final do form
$('.box_pergunta').last().find('input[type="text"]').val(''); // limpa o campo do novo elemento clonado, pois se já foi preenchido clona junto o valor...
});
$('form').on('click', '.btn_remove', function(e){
e.preventDefault();
// verifica se tem mais de 1 elemento
if ($('.box_pergunta').length > 1)
$(this).parents('.box_pergunta').remove(); // tem mais de 1, permite remover
});
See working on JSFiddle