1

Cenário exemplo

Tenho um form que possui no name, 2 valores específicos: X[Y]

X é referência a código da visão, e Y referente ao campo da minha visão, e o valor do input, será o valor referente a XY.

Poderia ser considerada uma matriz!? Enfim...

O exemplo está abaixo:

function clone($e) {
  $c = $($e).parents("tr");
  $($c).clone().appendTo("#clones");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="FormABC" onsubmit="return false">

  <table>
    <thead>
      <tr>
        <th>Fixo 1</th>
        <th>Fixo 2</th>
        <th>Fixo 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="date" name="fx[a]" value="2020-01-01"></td>
        <td><input type="text" name="fx[b]" value="teste"></td>
        <td><input type="number" name="fx[c]" value="123"></td>
      </tr>
    </tbody>
  </table>

  <br><br>

  <table>
    <thead>
      <tr>
        <th></th>
        <th class="table-secondary">Campo 1</th>
        <th class="table-secondary">Campo 2</th>
        <th class="table-secondary">Campo 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="table-secondary"><button onclick="clone(this)">Visão 1</button></th>
        <td><input type="number" name="1[1]" value="1"></td>
        <td><input type="number" name="1[2]" value="2"></td>
        <td><input type="number" name="1[3]" value="3"></td>
      </tr>
      <tr>
        <th class="table-secondary"><button onclick="clone(this)">Visão 2</button></th>
        <td><input type="number" name="2[1]" value="4"></td>
        <td><input type="number" name="2[2]" value="5"></td>
        <td><input type="number" name="2[3]" value="6"></td>
      </tr>
    </tbody>
  </table>

</form>

<br><br>

<div id="clones"><p>Clones</p></div>


O problema

Acima, quando faço um "clone", ele irá me trazer uma cópia, mas quando utilizo o serialize(), ele irá sobrepor os valores para o envio, e assim só irão os últimos valores conforme sequência do html.

Exemplo: Se eu clono a visão 2 e substituo os valores para 7, 8 e 9, meu retorno ficará:

Array
(
    [fx] => Array
        (
            [a] => 2020-01-01
            [b] => teste
            [c] => 123
        )

    [1] => Array
        (
            [1] => 1
            [2] => 2
            [3] => 3
        )

    [2] => Array
        (
            [1] => 7
            [2] => 8
            [3] => 9
        )

)

Exemplo da possível solução

O que pensei, seria adicionar um "contador" no início do name.

Por exemplo:

ANTES:

<tr>
    <th class="table-secondary"><button onclick="clone(this)">Visão 1</button></th>
    <td><input type="number" name="1[1]" value="1"></td>
    <td><input type="number" name="1[2]" value="2"></td>
    <td><input type="number" name="1[3]" value="3"></td>
</tr>

DEPOIS:

<tr>
    <th class="table-secondary"><button onclick="clone(this)">Visão 1</button></th>
    <td><input type="number" name="1[1][1]" value="1"></td>
    <td><input type="number" name="2[1][2]" value="2"></td>
    <td><input type="number" name="3[1][3]" value="3"></td>
</tr>

Dessa forma, eu teria cada valor individual, mantendo meu X e Y, adicionando o "contador" na frente C[X][Y].

Saída:

Array
(
    [fx] => Array
        (
            [a] => 2020-01-01
            [b] => teste
            [c] => 123
        )

    [1] => Array
        (
            [1] => Array
                (
                    [1] => 1
                )

        )

    [2] => Array
        (
            [1] => Array
                (
                    [2] => 2
                )

        )

    [3] => Array
        (
            [1] => Array
                (
                    [3] => 3
                )

        )

    [4] => Array
        (
            [2] => Array
                (
                    [1] => 4
                )

        )

    [5] => Array
        (
            [2] => Array
                (
                    [2] => 5
                )

        )

    [6] => Array
        (
            [2] => Array
                (
                    [3] => 6
                )

        )

    [7] => Array
        (
            [2] => Array
                (
                    [1] => 7
                )

        )

    [8] => Array
        (
            [2] => Array
                (
                    [2] => 8
                )

        )

    [9] => Array
        (
            [2] => Array
                (
                    [3] => 9
                )

        )

)

A dificuldade, seria em pegar esse name, tratar um por um para não definir um valor já utilizado em outro elemento, e assim sobrescrever esse valor.


Dúvida

  • Gostaria de saber formas de como eu poderia solucionar esse problema?
4
  • Vc quer serializar os inputs fora do form? O serialize só funciona com form.
    – Sam
    Commented 17/02/2020 às 20:22
  • Não, tudo dentro. No código está dentro do form... desculpae... kkk
    – rbz
    Commented 17/02/2020 às 20:36
  • Eu pensei numa forma, usando o id, mas é uma gambiarra braba... prefiro ver outras alternativas mais corretas...
    – rbz
    Commented 17/02/2020 às 20:37
  • Aí @rbz. Dá uma olhada na resposta e me diz o que achou. Cara, passei quase 2 horas nisso entre entender o que vc queria e chegar numa solução. Mas acho que ficou bom. Espero que funcione pro q vc quer. =]
    – Sam
    Commented 17/02/2020 às 22:17

1 Resposta 1

1

Uma solução é criar padrões de arrays separando pelos códigos das visões. Por exemplo, digamos que clonei os campos desta forma:

inserir a descrição da imagem aqui

O resultado será:

Array
(
    [fx] => Array
        (
            [a] => 2020-01-01
            [b] => teste
            [c] => 123
        )

    [1] => Array
        (
            [0] => Array
                (
                    [0] => 1
                    [1] => 2
                    [2] => 3
                )

            [1] => Array
                (
                    [0] => 1
                    [1] => 2
                    [2] => 3
                )

        )

    [2] => Array
        (
            [0] => Array
                (
                    [0] => 4
                    [1] => 5
                    [2] => 6
                )

            [1] => Array
                (
                    [0] => 4
                    [1] => 5
                    [2] => 6
                )
        )
)

Repare que a array principal contém 2 índices ([1] e [2]) onde em cada um estão agrupados em índices (começando do 0) as linhas referentes a cada visão.

Para conseguir isso, o padrão dos names devem ser:

<tr>
  <th class="table-secondary"><button onclick="clone(this)">Visão 1</button></th>
  <td><input type="number" name="1[0][]" value="1"></td>
  <td><input type="number" name="1[0][]" value="2"></td>
  <td><input type="number" name="1[0][]" value="3"></td>
</tr>
<tr>
  <th class="table-secondary"><button onclick="clone(this)">Visão 2</button></th>
  <td><input type="number" name="2[0][]" value="4"></td>
  <td><input type="number" name="2[0][]" value="5"></td>
  <td><input type="number" name="2[0][]" value="6"></td>
</tr>

As linhas que já aparecem na página devem começar com índice [0]. Por exemplo, ao clonar a linha "Visão 1", o clone será:

<tr>
  <th class="table-secondary"><button onclick="clone(this)">Visão 1</button></th>
  <td><input type="number" name="1[1][]" value="1"></td>
  <td><input type="number" name="1[1][]" value="2"></td>
  <td><input type="number" name="1[1][]" value="3"></td>
</tr>

Veja que foi criando um novo índice [1]. A clonar novamente a mesma linha, irá para [2] e assim sucessivamente.

Uma observação:

Como você está clonando linhas de tabela, as mesmas deveram ser inseridas numa table. Portanto a div #clones deverá ter uma table vazia para receber as linhas:

<div id="clones">
   <p>Clones</p>
   <table></table>
</div>

Você pode até colocar a id="clones" direto na tabela, mas deixei como está.

O código que irá fazer todo esse controle e alterações nos names é o que segue (veja comentários explicativos):

function clone($e) {

   $c = $($e).parents("tr");
   var v = $("input:eq(0)", $c).attr("name")[0]; // código da visão (1 ou 2)

   var ultimo = $("#clones [name^='"+v+"[']:last"); // pega o último input da visão clonada
   var idx = !ultimo.length ? 1 : +$(ultimo)[0].name.match(/\[(.+?)\]/)[1]+1; // pega o último índice clonado
   var klone = $($c).clone(); // elemento clonado

   $("input", klone).attr("name", v+"["+idx+"][]"); // altera os names de cada input do clone

   klone.appendTo("#clones table"); // faz o append
}

Ele basicamente altera o clone (names dos inputs) antes de fazer o append.

9
  • Rapaz, sabia que o negócio era meio complexo, mas não tanto! rs... Mas sobre sua resposta, não posso ter 0 no array... eu preciso que sempre tenha um array X que tem como key Y recebendo o valor do campo. Quanto ao clone não estar dentro da table, foi falha minha, pois ele precisa estar, faz parte do formulário ir adicionando embaixo. Mas eu acho que com sua resposta, pode ser que eu consiga resolver. Eu vou tentar, provavelmente demorar um pouco, pois tenho muitas visões x campos ! rs Agradeço por enquanto! ✌️
    – rbz
    Commented 17/02/2020 às 22:25
  • É que o [0] é a primeira linha, o [1] a segunda e assim consecutivamente. É sempre melhor tratar arrays com base 0 quando são coleções de um mesmo grupo. Do jeito que fiz aí me pareceu a melhor opção porque vc consegue facilmente tratar isso no backend.
    – Sam
    Commented 17/02/2020 às 22:29
  • Entendi... É que esses 2 itens X e Y, são id de FK's, onde faço o insert (x, y, valor)... quando fiz o form, não iria ter duplicidades, mas agora precisará, é onde deu o problema! kk De qualquer forma, já vou dar +1 pois no mínimo irá me ajudar em algo tudo isso.
    – rbz
    Commented 17/02/2020 às 22:31
  • Tem um detalhe... ele teria que pegar o maior número do "contador" de todos elementos do form, para não ter problema de sobreposição.
    – rbz
    Commented 18/02/2020 às 13:42
  • Eu fiz isso no código e somei +1, aqui: +$(ultimo)[0].name.match(/\[(.+?)\]/)[1]+1
    – Sam
    Commented 18/02/2020 às 14:01

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 .