3

Eu fiz um formulário onde um botão chama a função "addproduto()" nesta função eu crio 1 div e 2 textbox que são colocadas no mesmo div, e depois adiciono o div a um span no final da pagina.

A função funciona perfeitamente quando se trata de adicionar a div e as textboxes, só que quando eu clico no botão de novo e uma das textboxes adicionadas anteriormente já está preenchida, o que estiver escrito apaga e ela fica em branco.

Não faço idéia do porque disto ocorrer, achava que era pelo fato de que os "names" das textboxs serem organizados como array, mas parece que não é. aqui está o código:

var contador = 1;
function addproduto() 
{
var div = document.createElement("div");
contador = contador + 1;
var nome = document.createElement("input");
var qtd = document.createElement("input")
div.setAttribute("id", contador);

nome.setAttribute("type", "text");
nome.setAttribute("name", "nome[]");

qtd.setAttribute("type", "text");
qtd.setAttribute("name", "qtdprod[]");

var spanlugar = document.getElementById("lugar");

    //coloca os elementos no ultimo lugar da nova div e entre eles os textos
    div.innerHTML = div.innerHTML + "Nome do produto " + contador  + ":" ;
    div.appendChild(nome);
    div.innerHTML = div.innerHTML + "<br> Quantidade:";
    div.appendChild(qtd);

//colca o div no ultimo lugar do span.
  spanlugar.appendChild(div);
 spanlugar.innerHTML = spanlugar.innerHTML + "<br>";


}
1
  • Poderiam postar o código do formulário também? Commented 2/02/2017 às 17:17

1 Resposta 1

2

Existem algumas coisas erradas no seu código. Segue a correção:

var contador = 1;
function addproduto() 
{
  contador++;

  var _div = document.createElement("div");
  var _nome = document.createElement("input");
  var _qtd = document.createElement("input")
  var _br01 = document.createElement("br")
  var _br02 = document.createElement("br")

  var _divInfo01 = document.createTextNode("Nome do produto " + contador  + ":");
  var _divInfo02 = document.createTextNode("Quantidade:");

  _div.setAttribute("id", contador);

  _nome.setAttribute("type", "text");
  _nome.setAttribute("name", "nome[]");

  _qtd.setAttribute("type", "text");
  _qtd.setAttribute("name", "qtdprod[]");

  var spanlugar = document.getElementById("lugar");

  //coloca os elementos no ultimo lugar da nova div e entre eles os textos
  _div.appendChild(_divInfo01);
  _div.appendChild(_nome);
  _div.appendChild(_br01);
  _div.appendChild(_divInfo02);
  _div.appendChild(_qtd);

  //colca o div no ultimo lugar do span.
  spanlugar.appendChild(_div);
  spanlugar.appendChild(_br02);

}

Não mude o innerHMTL senão o browser irá jogar fora os elementos anteriores e o que estava preenchido, e recriar tudo de novo.

Também, para criar um texto, use o método acima para criar "nós" de texto.

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 .