Clone data insertion box from with jQuery

Question

I wanted to make it work with js(jQuery) the interface below:

I am using the CSS Foundation framework to develop this project. However, I don’t know how to make a clone using the jQuery of this combo where the inputs are. In fact I want that the moment the user clicks on more it dynamically add one more line equal to the first to enter 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.

Answer 1

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

Answer 2

A suggested implementation would be to have a hidden model, and when the user clicks the clone button, clone with jQuery and do append in the form, example:

Demo Jsfiddle

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 form elements, dynamically, or use as array -> name="mensagem[]"