Adicionar / remover campos dinamicamente com Jquery

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

Código HTML

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

Código HTML

Explicação

Na linha 8 do código de Jquery:

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á:

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:

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.

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.

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.

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

6 Replies to “Adicionar / remover campos dinamicamente com Jquery

  1. Boa noite amigo. Sua dica me ajudou muito e estou adaptando ele a um programa que estou fazendo. Mas a parte de remover um campo que você postou não está funcionando nem com divs nem com tabelas. Nem nesses exemplos seu não funcionam. Poderia me dar uma dica de como corrigir esse erro. Grato.

    1. Ola Dival !
      Lamento não ter respondido mais cedo.

      Já voltei a experimentar o código e todo ele funciona sem problemas. As versões que estão no codepen.io estão corretas e a funcionar. Qual a parte que não funciona ? Consegue dizer-me qual o erro ? Veja na consola de desenvolvimento do browser, que se estiver a dar um erro, ele vai lá aparecer !

      Cumprimentos

  2. Ola amigo…
    Consigo utilizar o seu código normalmente para fazer inserção dos dados no banco de dados, agora preciso fazer o caminho inverso preciso editar os dados, como faço isso neste formulário ?

    Por que e simples, pego o array e envio para outro arquivo em php, utilizo Foreach e armazeno os dados do array no banco de dados, mais a dor de cabeco agora e como faco para voltar estes dados do array neste formulario…

    1. Olá Pedro !

      Obrigado pelo comentário.

      Não é complicado, mas terá que ser feito via AJAX se não quiser ter que efetuar um refresh integral da página… Basta chamar um ficheiro .php numa chamada de AJAX e esse ficheiro PHP devolve, por exemplo, o conteúdo do array via XML… Depois na chamada AJAX é só interpretar o XML e colocar diretamente nos campos – criando os campos todos na função que irá interpretar o XML que vem do ficheiro .php

      Veja aqui exemplos:

      http://www.w3schools.com/php/php_ajax_xml.asp

      Abraço

    1. Olá Fernando !
      Em principio sim, bastando para isso preencher o campo value=”” quando se vai adicionar o campo !

Leave a Reply to Dival Gomes dos Santos Cancel reply

Your email address will not be published. Required fields are marked *