Clone data insertion box with jQuery

3

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

I'musingtheCSSFoundationframeworktodevelopthisproject.However,IdonotknowhowtomakeacloneusingjQueryfromthiscombowheretheinputsare.ActuallyIwantthemomenttheuserclicksonitmoredynamicallyaddanotherlineequaltothefirstonetoentermorerecords.

TheHTMLofthisrecordisbelow:

<formaction="">
    <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.

    
asked by anonymous 11.09.2014 / 01:30

2 answers

3

One implementation suggestion would be to have a hidden model, and when the user clicks the clone button, clone with jQuery and make append in 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 of the form elements, dynamically, or use as array - > name="mensagem[]"

    
11.09.2014 / 01:51
4

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

    
11.09.2014 / 02:32