1

Tenho um pequeno formulário para cadastro de telefone, e eu quero que o usuário possa clicar no botão "Adicionar novo telefone" e uma cópia idêntica do formulário seja criada embaixo, fazendo assim o usuário poder colocar quantos telefones quiser.

inserir a descrição da imagem aqui

E esse é o HTML:

            <div id="divTelefone">
            Telefone:<br>
            <label for="frmDDD">DDD: </label>
            <input type="text" maxlength="2" size="3" id="frmDDD" name="frmDDD" placeholder="xx"></input>
            <label for="frmNumero">Número:</label>
            <input type="text" id="frmNumero" name="frmNumero" size="20" maxlength="9" placeholder="Somente números"></input><br><br>

            <label for="frmOperadora">Operadora Telefone:</label>
            <select id="frmOperadora" name="frmOperadora">
                <option value="0">-----</option>
                <option value="VV">Vivo</option>
                <option value="CL">Claro</option>
                <option value="TM">Tim</option>
                <option value="OI">Oi</option>
                <option value="NX">Nextel</option>
                <option value="AL">Algar</option>
                <option value="SE">Sercomtel</option>
                <option value="MV">MVNO's </option>
            </select>
            <label for="frmDescTel">Descrição do telefone:</label>
            <input type="text" id="frmDescTel" name="frmDescTel" maxlength="25" size="25" placeholder="ex: trabalho, pessoal..."></input>
        </div>
        <input type="button" name="frmAddTelefone" id="frmAddTelefone" value="Adicionar outro número" onclick="addTelefone()">
3
  • 1
    Onde está o javascript que você já implementou para gerar o html? Commented 7/05/2019 às 17:36
  • Vc utiliza jQuery?
    – Sam
    Commented 7/05/2019 às 17:36
  • Não utilizo Jquery
    – Gabriel GG
    Commented 9/05/2019 às 7:34

3 Respostas 3

2

Cria um clone do elemento com id DivTelefone:

let clone = document.querySelector('#divTelefone').cloneNode( true );

Altera o id do html clonado:

clone.setAttribute( 'id', newId );

Anexe o elemento recém-criado no elemento p(Obs: crie uma tag no html do tipo p)

document.querySelector('p').appendChild( clone );

Ou então usando jQuery:

$('#divTelefone').clone().attr('id', newId).appendTo('p');

2
  • Mas como eu poderia mudar o id de cada campo dentro da div?
    – Gabriel GG
    Commented 9/05/2019 às 7:39
  • Teria de realizar a alteração um a um da mesma maneira que alterou o da div Commented 9/05/2019 às 11:58
2

Antes de mais nada, você precisa converter os names dos elementos de formulário em array, senão você não conseguira pegá-los no backend ao enviar o formulário.

Você deve colocar os colchetes [] no final de todos os names, assim:

name="frmDDD[]"

Feito isso (em todos os campos), você poderá reproduzir o conteúdo da div#divTelefone, desta forma (veja comentários no código):

var divtel = document.getElementById("divTelefone"); // seleciona a div
var clone = divtel.innerHTML; // copia o HTML da div, que será a fonte
function addTelefone(){
   
   var novotel = document.createElement("div"); // cria uma div
   novotel.className = "tels"; // atribui uma classe na nova div
   divtel.appendChild(novotel); // insere a nova div na div principal
   var last = document.querySelector(".tels:last-child"); // seleciona a última div criada
   last.innerHTML = clone; // insere o HTML copiando anteriormente na última div inserida
   var fors = last.querySelectorAll("[for]"); // seleciona todos os atributos "for"
   var ids = last.querySelectorAll("[id]"); // seleciona todos os atributos "id"
   var d = new Date(); // data de hoje
   var i = "_"+d.getHours()+d.getMinutes()+d.getSeconds()+d.getMilliseconds(); // número único para os "for" e "id"
   for(let x = 0; x < fors.length; x++){
      fors[x].setAttribute("for", fors[x].getAttribute("for")+i); // altera os for
      ids[x].id = ids[x].id+i; // altera os id
   }
}
<div id="divTelefone">
   Telefone:<br>
   <label for="frmDDD">DDD: </label>
   <input type="text" maxlength="2" size="3" id="frmDDD" name="frmDDD[]" placeholder="xx"></input>
   <label for="frmNumero">Número:</label>
   <input type="text" id="frmNumero" name="frmNumero[]" size="20" maxlength="9" placeholder="Somente números"></input><br><br>
   <label for="frmOperadora">Operadora Telefone:</label>
   <select id="frmOperadora" name="frmOperadora[]">
      <option value="0">-----</option>
      <option value="VV">Vivo</option>
      <option value="CL">Claro</option>
      <option value="TM">Tim</option>
      <option value="OI">Oi</option>
      <option value="NX">Nextel</option>
      <option value="AL">Algar</option>
      <option value="SE">Sercomtel</option>
      <option value="MV">MVNO's </option>
   </select>
   <label for="frmDescTel">Descrição do telefone:</label>
   <input type="text" id="frmDescTel" name="frmDescTel[]" maxlength="25" size="25" placeholder="ex: trabalho, pessoal..."></input>
</div>
<input type="button" name="frmAddTelefone" id="frmAddTelefone" value="Adicionar outro número" onclick="addTelefone()">

Observações:

  • Os atributos for e id são alterados de forma dinâmica cada vez que um novo formulário é inserido.
  • Outra coisa é que não existe tag de fechamento </input>. A tag <input>, no HTML5, não precisa ser fechada.
2
  • 2
    Vale ressaltar que a tag input não deve ser fechada e todos os ids em uma página HTML devem ser únicos. Commented 7/05/2019 às 18:43
  • 1
    Resolvi a questão dos for+ids. ;)
    – Sam
    Commented 10/05/2019 às 9:39
1

Quando quiser adicionar HTML a elementos de uma página você pode manipular a propriedade Element.innerHTML.

Nesse exemplo eu comecei com um div divTelefone vazio e cada vez que o botão para adicionar telefone é pressionado ele insere os componente de formulário.

var telid = 1;

function addTelefone(){
 
   document.getElementById("divTelefone").innerHTML += `

    <div id="Telefone` + telid + `">
        Telefone:<br>
        <label for="frmDDD">DDD: </label>
        <input type="text" maxlength="2" size="3" id="frmDDD" name="frmDDD" placeholder="xx"></input>
        <label for="frmNumero">Número:</label>
        <input type="text" id="frmNumero" name="frmNumero" size="20" maxlength="9" placeholder="Somente números"></input><br><br>

        <label for="frmOperadora">Operadora Telefone:</label>
        <select id="frmOperadora" name="frmOperadora">
            <option value="0">-----</option>
            <option value="VV">Vivo</option>
            <option value="CL">Claro</option>
            <option value="TM">Tim</option>
            <option value="OI">Oi</option>
            <option value="NX">Nextel</option>
            <option value="AL">Algar</option>
            <option value="SE">Sercomtel</option>
            <option value="MV">MVNO's </option>
        </select>
        <label for="frmDescTel">Descrição do telefone:</label>
        <input type="text" id="frmDescTel" name="frmDescTel" maxlength="25" size="25" placeholder="ex: trabalho, pessoal..."></input>
    </div>

   `;
    telid++;
  
}
<html>
    <body>

        <div id="divTelefone">
            
        </div>
        <input type="button" name="frmAddTelefone" id="frmAddTelefone" value="Adicionar telefone" onclick="addTelefone()">

    </body>
</html>

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 .