7

Estou usando o plugin jQuery CloneYa para clonar elementos de um formulário com jQuery, mas ele é um pouco limitado, queria clonar os inputs mas preciso incrementar o name quando for feito isso, por exemplo:

<input type="text" name="produtos[qtd][1]">

O próximo input clonado teria que ter o name produtos[qtd][2], se houver uma maneira de fazer isso com este plugin ou de outra maneira, a consequência de clonar os inputs assim é que o plugin de validação só valida o primeiro input (jquery.validate).

Este é um exemplo de como está um formulário meu

<form method="post">
    <div class="wrapper">
        <div class="toclone">
            <select name="list">
                <option>selecione...</option>
                <option>opção 1</option>
                <option>opção 2</option>
                <option>opção 3</option>
                <option>opção 4</option>
            </select>
            <input type="text" name="produtos[qtd][]">
            <button type="button" id="add">+</button>
            <button type="button" id="remove">-</button>
        </div>        
    </div>
    <input type="submit">
</form>

JSFiddle

2
  • Para clonar um elemento em js: pt.stackoverflow.com/q/4321/3082 Commented 17/03/2014 às 14:42
  • o plugin exige apenas o comando de inicialização, que é o que esta descrito na documentação. fora isso, não encontrei nada lá que ajudasse a resolver o problema em incrementar os names
    – Leandro RR
    Commented 17/03/2014 às 14:49

1 Resposta 1

6

Para clonar o seu elemento, e setar o name para o name anterior com um valor +1, basta fazer da seguinte forma:

function adicionar(){
  var ElementoClonado = $(this.parentNode).clone(); //clona o elemento
  var str = $(ElementoClonado).children('input').eq(0).attr('name').split("["); //divide o name por "["
  console.log(str);
  var intQtd = parseInt(str[2].split("]")[0]); //resgata o numero entre "[" e "]"
  console.log(intQtd);
  var newName = "produtos[qtd]["+(intQtd+1)+"]"; //novo valor name somado +1 do original
  ElementoClonado.children('input').eq(0).attr('name', newName); //seta o novo name para o elemento clonado
  $('.wrapper').append(ElementoClonado);
  $('.add').on("click", adicionar);
  $('.remove').on("click", remover);
  $(this).unbind("click");
}
function remover(){
  $(this.parentNode).remove();
}
$('.add').on("click", adicionar);
$('.remove').on("click", remover);

Porém, você deve lembrar que não se pode ter mais de um HTML ID igual, por isso mude todo seu html para utilizar classes, e também você deve iniciar com o numero 1 da "qtd" desta forma:

<form method="post">
<div class="wrapper">
    <div class="toclone">
        <select name="list">
            <option>selecione...</option>
            <option>opção 1</option>
            <option>opção 2</option>
            <option>opção 3</option>
            <option>opção 4</option>
        </select>
        <input  type="text" name="produtos[qtd][1]">
        <button type="button" class="add">+</button>
        <button type="button" class="remove">-</button>
    </div>        
</div>
    <input type="submit">
    </form>

Exemplo funcionando no JSFiddle

6
  • tem um fiddle? para exemplo?
    – Leandro RR
    Commented 17/03/2014 às 15:14
  • é possivel clonar a div com a classe ".toclone" com seus inputs dentro e fazer esse script funcionar da mesma maneira? porque na verdade eu clono o "wrapper" inteiro com aqueles dois inputs dentro.
    – Leandro RR
    Commented 17/03/2014 às 15:16
  • sim é possível, vou editar a resposta e fazer um fiddle Commented 17/03/2014 às 16:18
  • Editei, vê se é isso que você quer @LeandroRuel eu também fiz o de remover ^^ Commented 17/03/2014 às 16:50
  • 1
    congratulations!
    – Leandro RR
    Commented 17/03/2014 às 17:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .