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?