Adicionar elementos dinamicamente relacionados com jQuery

Eu tenho uma vídeoaula falando a respeito a como criar campos dinamicamente, só que me perguntaram como adicionar outros elementos, dentro dos elementos criados. Exemplo: você precisa criar dinamicamente campos de nome e telefone. Sendo que será necessário você ter a possibilidade de criar novos campos de telefone relacionados a esse campo criado. Parece confuso não? Mas vai ficar mais claro vendo a imagem abaixo, pelo menos eu acho: D

Então, clico em Add Campos, ele criar um elemento com campos nome e telefone. E se o clicar em Add Telefone, ele adiciona novos campos de telefone.

E para recuperarmos esses valores usando uma linguagem Server Side, como php, a maneira mais fácil é utilizar array. Sabendo, podemos pensar como ficaria ao criar esses campos:

<!--Grupo 1-->
<input type="text" name="nome[]" />
<input type="text" name="telefone[]" />
<input type="text" name="telExtra[0][]" />
<input type="text" name="telExtra[0][]" />

<!--Grupo 2-->

<input type="text" name="nome[]" />
<input type="text" name="telefone[]" />
<input type="text" name="telExtra[1][]" />
<input type="text" name="telExtra[1][]" />


Dessa forma podemos recuperar assim:

<?php 
	$nome     = $_POST['nome'];
	$telefone = $_POST['telefone'];
	$total    = count($nome);
	
	for($i = 0; $i < $total; $i++){

		printf("Nome : %s <br />", $nome[$i]);
		printf("Telefone : %s <br />", $telefone[$i]);
		
		if(isset($_POST['telExtra'][$i])){
			foreach($_POST['telExtra'][$i] as $value){
				printf("'Tel. Extra : %s <br />", $value);
			}
		}
		echo '<br /><hr />';
	}
	
?>

Já vimos como precisa ser feito, e como é recuperado, agora vamos ao jQuery para criamos os campos dinamicamente. Irei coloca o código e deixar comentado com as explicações :

$(function(){
    
    //Cria uma função para Criar os campos Nome e Telefone
    function createDivFields(){
        /*
         Criamos a variavel, e atribuimos os campos que serão criados;
         Utilizamos o colchetes nos nomes do campos para informar que os dados 
         em forma de array;
         Adiciona uma div, para que nela seja criado novos campos extras;
         E um link para para chamar o evento de adicionar;
        */
        var html  = '<div class="items">';
            html += '<label>Nome : <input type="text" name="nome[]" /></label>';
            html += '<label>Telefone : <input type="text" name="telefone[]" /></label>';
            html += '<a href="#" class="addTel">Add Telefone</a>';
            html += '<div class="item"></div>';
            html += '<div>';
            return html;
    }
    
    //Cria a função para adicionar os campos extras de telefone
    function createFieldTel(num){
        /*
         Repare que é informado que terá um parametro;
         Será por ele iremos identificar de quem pertence esses campos;
        */
        var tel  = '<label> Telefone :';
            tel += '<input type="text" name="telExtra['+num+'][]" />';
            tel += '</label><br />';
            return tel;
    }
    
    //cria uma função para conta os campos criados
    function getTotalItems(){
        //Contamos o total de campos, e diminuimos 1
        //Porque o array é iniciado seu indice com 0
        return $(".items").length - 1;
    }
    
    //Adiciona os nome e telefone
    $("#add").click(function(){
        //Adicionado no final do elemento ( #boxFields) os campos
        $("#boxFields").append(createDivFields());
        return false;
    });
    
    //Adiciona os campos extras
    $(".addTel").live('click', function(){
        /*
            Utilizamos Live para atribui o evento click ao link addTel
            Isso porque como criamos dinamicamente esse elemento
            ele ainda não está no DOM, quando o jQuery vai executar
        */
        
        //Chamamos o contador
        var total = getTotalItems();
        
        //Voltamos um elemento (parent);
        //e depois buscamos .item, informando que precisa ser o primeiro encontrado
        //Adiciona no final do elemento (.item) os novos campos
        
        $(this).parent().children('.item:first').append(createFieldTel(total));
        
        return false;
    });

});

<a href="#" id="add">Adicionar</a>
<form action="" method="post">

<div id="boxFields">
 
</div>

<br />
<input type="submit" value="Enviar" />
</form>

Veja o Exemplo o funcionamento (Clique na aba Result) :




Se o conteúdo foi relevante para você, e desejar, você pode incentivar fazendo uma doação.

6 thoughts on “Adicionar elementos dinamicamente relacionados com jQuery

  1. Olá, você ensinou direitinho como adicionar, etc, porém, como faço para Excluir campo que adicionei?

    sds

  2. Prezado, obrigada pelo conhecimento repassado. Poderia me ajudar com uma situação parecida? Por exemplo, digamos que haja um formulário para cadastrar uma empresa, onde esta possui uma lista de funcionários (nome, telefone).. Eu posso usar o seu exemplo, considerando um objeto adicionado dinamicamente com nome e telefone, mas, como eu envio esses dados para o backend?? Espero ter sido clara. Agradeço se puder responder. Obrigada.

  3. Olá David beleza cara? Velho estou com uma demanda mas não sei se posso utilizar seu exemplo, estou com um formulário de venda de planos, onde tenho uma valor para cada plano. De acordo que a pessoa for clicando em adicionar dependente o valor terá que ir somando e limpando o formulário caso ela deseje adicionar mais dependentes. Estou a semanas pesquisando mais não consigo resolver –‘

    1. Pedro, vc pode cada vez q a pessoa adiciona, no evento clique vc, ir verificar:

      var preco = 0;
      $(&quot;.preco&quot;).each(function(){
         preco =+ $(this).val();
      });
      $(&quot;#campo_total&quot;).html(preco);
      

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *