Add new field and leave it empty

Navigation
3

I'm using a jQuery (clone) to copy a line and add it to the element, but if I have this line filled, it comes exactly like this! I need that when cloning this line, the forms come empty.

HTML 

<div class="container_linhas">
    <div id="linha_1" class="linha" style="padding: 2px">
      <label>Tipo de Provento</label>
      <select style="width: 480px" name="provento_tipo[]">
            <option>Selecione o Tipo de Provento</option>
            <?
                foreach($lista_adicionais_desconto as $valor){ 
            ?>
            <option value="<? echo $valor->idParametro; ?>"><? echo $valor->parametro; ?></option>
            <? } ?>
        </select>
        <select class="input-small" name="provento_formato[]">
            <option value="1">R$</option>
            <option value="2">%</option>
        </select>
        <input type="text" class="input-small" name="provento_valor[]">  

        <button type="button" class="removelinha" id="removelinha" style="display:none"><i class="icon-remove"></i></button>
        <button class="btn btn-small clonarlinha" type="button" id="clonarlinha" style="margin-top: 3px">
            <i class="icon-plus-sign"></i>
        </button>                                                  
    </div>
</div>

jQuery 

$(document).ready(function(e) {
    $('.clonarlinha').click(function(e) {
        //exibe botões de remover
        $(this).parent().parent().find('.removelinha').css('display', 'inline-block');

        //clona linha e atribui novo ID incrementando
        $(this)
            .parent()
            .clone(true)
            .appendTo( $(this).parent().parent() )
            .attr('id', 'linha_' + $(this).parent().parent().children( ".linha" ).length)
            .find('.removelinha').css('display', 'inline-block');

        //remove botão de clonagem repetido
        $(this).parent().parent().find('.clonarlinha:first').remove();

    });

    $('.removelinha').click(function(e) {
        var container = $(this).parent().parent();

        //se tiver mais de uma linha permite remover
        if ($(container).find('.linha').length > 1) {
            //faz uma cópia do botão clonar
            var btnClonar = $(this).parent().find('.clonarlinha').clone(true);

            //remove a linha
            $(this).parent().remove().after(function(){

                //caso a linha removido contenha o botão clonar, insere o mesmo nvamente
                if ( $(container).find('.clonarlinha').length == 0 ) {
                    $(container).find('.linha:last').append(btnClonar);
                }
                if ($(container).find('.linha').length == 1) {
                    $(container).find('.removelinha').css('display', 'none');
                }
            });

        }
    });
});

    
asked by anonymous 01.10.2015 / 23:18

3 answers

2

You can user find on your cloned item and change the value of the items inside it. 

$(this).parent().clone(true).find('select, input').val('')
    
01.10.2015 / 23:33
1

You can use the solution of our friend @JefersonAssis by adding the quotes in the val (''), thus: 

$(this)
    .parent()
    .clone(true)
    .find('select, input').val('')
    .appendTo( $(this).parent().parent() )
    .attr('id', 'linha_' + $(this).parent().parent().children( ".linha" ).length)
    .find('.removelinha').css('display', 'inline-block');

Follow jsfiddle

    
02.10.2015 / 01:09
0

Sirs,

I got the solution this way: 

//clona linha e atribui novo ID incrementando
tmp = $(this).parent().clone(true);
tmp.find('.limpar_campo').val("");
tmp.appendTo( $(this).parent().parent() );
tmp.attr('id', 'linha_' + $(this).parent().parent().children( ".linha" ).length);
tmp.find('.removelinha').css('display', 'inline-block');

And I applied the class "clean_field" in the form that would need to be cleaned! All right now. Obg!

    
02.10.2015 / 16:08
JQuery how to monitor stock exchange? Friendly URL, images do not appear even putting absolute path