Neste pequeno post irei mostrar como adicionar / remover campos (ou linhas de uma tabela com campos) dinamicamente usando Jquery e processar os dados/argumentos com PHP e arrays, mostrando que mesmo dinamicamente é possivel manipular os dados.

Usando DIVs

Primeiro, o código jquery

$(document).ready(function() {
        var campos_max          = 10;   //max de 10 campos
        var x = 1; // campos iniciais
        $('#add_field').click (function(e) {
                e.preventDefault();     //prevenir novos clicks
                if (x < campos_max) {
                        $('#listas').append('<div>\
                                <input type="text" name="campo[]">\
                                <a href="#" class="remover_campo">Remover</a>\
                                </div>');
                        x++;
                }
        });

        // Remover o div anterior
        $('#listas').on("click",".remover_campo",function(e) {
                e.preventDefault();
                $(this).parent('div').remove();
                x--;
        });
});

Código HTML

<input type="button" id="add_field" value="adicionar">
<br>
<div id="listas">
    <div><input type="text" name="campo[]"></div>
</div>

Adicionar um campo

Na linha 4 , ao botão (definido no HTML) com o id=”add_field”, adicionamos a função “click” para que, ao clicar, seja executada a função definida.

Primeiro, não permite mais clicks (um de cada vez) e verifica se já temos o máximo de campos possível – definido no inicio –

Se não acontecer, vamos usar a função append  do jquery para adicionar mais um campo (um div e um input) ao div inicial, com o id=”listas”. Posteriormente Incrementamos o X.

Remover um campo

Na linha 15, vamos usar a função on do jquery, para adicionar eventos de click aos divs adicionados.

Porque temos que usar esta função? Porque, ao carregar o documento, o browser analisa o DOM, e qualquer código de javascript (ou jquery) que tenhamos é automaticamente inicalizado e os eventos “atribuídos”. No entanto, estes DIVS são adicionados dinamicamente, não existem quando o documento é carregado. Assim, temos que usar esta função para adicionar o evento “click” ao correspondente DIV.

Depois, usamos a função .parent do jquery para remover o div correspondente.

Com este código, o DIV que vamos remover é aquele onde pressionamos REMOVER e não o ultimo inserido.

Podem experimentar este código no codepen.io

Usando Tabelas

Usando uma tabela é quase a mesma coisa, mas em vez de usar os DIVs, vamos aos TRs

Primeiro, o código jquery

$(document).ready(function() {
        var max_fields          = 10;   //max de 15 inscricoes de cada vez
        var x = 1;
        $('#add_field').click (function(e) {
                e.preventDefault();     //prevenir novos clicks
                if (x < max_fields) {
                        $('#listas').append('\
                                        <tr class="remove' + x + '"><td><input type="text" name="nome[]" id="nome"></td>\
                                        <td><input type="text" name="dta_nasc[]" id="dta_nasc" placeholder="yyyy-mm-dd"></td>\
                                        <td>\
                                                Sim&nbsp;<input type="radio" value="1" name="cool['+ x +']" id="cool">&nbsp;\
                                                N&atilde;o&nbsp;<input type="radio" value="0" name="cool['+ x +']" id="cool" checked>&nbsp;\
                                        </td>\
                                        <td><a href="#" class="remove_campo" id="remove' + x +'">X</a></td>\
                        ');
                        x++;
                }
        });

        //this is not the best move, because will create overhead...
        //but is for simplicity
        //damn users
        $('#listas').on("click",".remove_campo",function(e) {
                e.preventDefault();
                var tr = $(this).attr('id');
                //alert ('remove: ' + tr);
                $('#listas tr.'+ tr).remove();
                x--;
        });

});

Código HTML

<input type="button" id="add_field" value="Adicionar">
<table id="listas" border="0">
        <tr>
                <th>Nome</th>
                <th>Data Nasc.</th>
                <th>Estamos bem?</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
        </tr>
        <tr>
                <td><input type="text" name="utente[]" id="utente" maxlength="150"></td>
                <td><input type="text" name="dta_nasc[]" id="dta_nasc" maxlength="10" placeholder="yyyy-
                <td>
                        Sim&nbsp;<input type="radio" value="1" name="cool[0]" id="cool">&nbsp
                        N&atilde;o&nbsp;<input type="radio" value="0" name="cool[0]" id="cool" checked>
                </td>
        </tr>
</table>

Explicação

Na linha 8 do código de Jquery:

 <tr class="remove' + x + '">

Estamos a adicionar uma classe, que será “remove” + x, onde X será um valor entre 0 e 10 (max_fields).

Vendo o código, a medida que adicionamos linhas, ficará:

<tr class="remove0">
<tr class="remove1">
<tr class="remove2">
<tr class="remove3">

Estamos a fazer isto porque, ao remover, conseguiremos remover a linha exacta que desejamos. Se não especificarmos esta classe, apenas conseguiriamos remover sempre a ultima linha da tabela.  É possível que acrescente um pouco de código a mais e é mais trabalho para o browser, mas conseguimos que o utilizador escolha qual a linha a remover.

addjqueryTable

Neste momento já sabemos como adicionar (e remover) campos dinamicamente usando Jquery.

Podem experimentar este código em codepen.io

Agora, como é que vamos armazenar estes dados – usando PHP ?

Para estes casos, usamos arrays. Como definir um array em HTML para o PHP ? Bastante simples. Basta que o atributo name seja sempre o mesmo e adicionemos parênteses retos.

Neste caso, o primeiro campo:

<input type="text" name="nome[]" id="nome">

Reparem que o atributo name chama-se nome[]. No lado depois do PHP, ao enviar o formulário, basta receber o argumento, seja por POST ou GET

Independentemente do número de linhas que tenhamos ou sejam adicionadas, o array nome terá sempre o tamanho do numero de campos.

$nome = $_POST['nome'];

Radio buttons

Neste caso, os Radio Buttons são um pouco mais complicados. Como sabem, se os radio buttons tiverem o mesmo nome, só se pode selecionar um – ao contrário das checkboxes.

Aqui, vamos usar um truque – criamos um array na mesma – chamado cool, mas inicializamo-lo logo, neste caso, com o HTML especificamos que é o indice 0 (arrays em programação começam sempre do 0) – e assim conseguimos que apenas 1 possa ser selecionado.

Sim&nbsp;<input type="radio" value="1" name="cool[0]" id="cool">&nbsp
N&atilde;o&nbsp;<input type="radio" value="0" name="cool[0]" id="cool" checked>

Posteriormente, no código Jquery, adicionamos igual, sempre com o indice inicializado, que será igual ao X – que é o valor corrente do número de campos adicionados.

Sim&nbsp;<input type="radio" value="1" name="cool['+ x +']" id="cool">&nbsp;
N&atilde;o&nbsp;<input type="radio" value="0" name="cool['+ x +']" id="cool" checked>&nbsp;

Desta forma, conseguimos manter na mesma um array (com o mesmo número de elementos que o número de campos adicionados e/ou removidos) mas que, permite escolher apenas uma de duas opções dos Radio Buttons sem que interfira com os restantes das outras linhas adicionadas.

Para finalizar, desta forma conseguimos adicionar dinamicamente campos e conseguimos à mesma manipula-los com PHP