Adicionar Input dinamicamente

Enviada por João Filho 
Fóruns Lista de mensagens Novo tópico
João Filho
Adicionar Input dinamicamente
27 de June de 2015 às 11:51AM
Olá, Tenho uma duvida e acredito que alguém possa me ajudar.

Em um projeto que estou desenvolvendo, crio um portal em PHP com banco de dados SQL. toda a integração dos dados adicionados no PHP são colocados no SQL sem problemas. Meu problema começo quando resolvi colocar campos adicionados dinamicamente, onde de inicio uma tabela contem 7 campos com input. e adicionei um botão para adicionar mais linhas. Segue o codigo para verificação.

___________________________________________________________________________________________________________________
<script LANGUAGE="JavaScript">
totals =0;
function adiciona(){
totals++
tbl = document.getElementById("tabela")

var novaLinha = tbl.insertRow(-1);
var novaCelula;

if(totals%2==0) cl = "#F5E9EC";
else cl = "#FBF6F7";

novaCelula = novaLinha.insertCell(0);

novaCelula.style.backgroundColor = cl

novaCelula.innerHTML = "<input id='descricaoItem"+totals+"' type='text' class='span12' name='descricaoItem' value='' />";

novaCelula = novaLinha.insertCell(1);
novaCelula.align = "left";
novaCelula.style.backgroundColor = cl;
novaCelula.innerHTML = "<input id='descricaoCodigo' type='text' class='span12' name='descricaoCodigo' value='' />";

novaCelula = novaLinha.insertCell(2);
novaCelula.align = "left";
novaCelula.style.backgroundColor = cl;
novaCelula.innerHTML = "<input id='descricaoServico' type='text' class='span12' name='descricaoServico' value='' />";

novaCelula = novaLinha.insertCell(3);
novaCelula.align = "left";
novaCelula.style.backgroundColor =cl;
novaCelula.innerHTML = "<input id='descricaoUni' type='text' class='span12' name='descricaoUni' value='' />";

novaCelula = novaLinha.insertCell(4);
novaCelula.align = "left";
novaCelula.style.backgroundColor =cl;
novaCelula.innerHTML = "<input id='descricaoQuant' type='text' class='span12' name='descricaoQuant' value='' />";

novaCelula = novaLinha.insertCell(5);
novaCelula.align = "left";
novaCelula.style.backgroundColor =cl;
novaCelula.innerHTML = "<input id='descricaoPreco' type='text' class='span12' name='descricaoPreco' value='' />";

novaCelula = novaLinha.insertCell(6);
novaCelula.align = "left";
novaCelula.style.backgroundColor =cl;
novaCelula.innerHTML = "<input id='descricaoPrecototal' type='text' class='span12' name='descricaoPrecototal' value='' />";

}
</script>
</head>
<body><div style="padding: 1%; margin-left: 0">

<div>
<table id='tabela' border='0'>
<tr style='background-color:#FBF6F7'>
<td>Item </td>
<td>Código</td>
<td>Especificação do Serviço</td>
<td>UNI</td>
<td>QUANT</td>
<td>P. UNI.</td>
<td>Preço Total</td>
</tr>
<tr style='background-color:#FBF6F7'>
<td><input id='descricaoItem' type='text' class='span12' name='descricaoItem' value='' /></td>
<td><input id='descricaoCodigo' type='text' class='span12' name='descricaoCodigo' value='' /></td>
<td><input id='descricaoServico' type='text' class='span12' name='descricaoServico' value='' /></td>
<td><input id='descricaoUni' type='text' class='span12' name='descricaoUni' value='' /></td>
<td><input id='descricaoQuant' type='text' class='span12' name='descricaoQuant' value='' /></td>
<td><input id='descricaoPreco' type='text' class='span12' name='descricaoPreco' value='' /></td>
<td><input id='descricaoPrecototal' type='text' class='span12' name='descricaoPrecototal' value='' /></td>
</tr>
</table></div></div><input type='button' id='incluir' value='incluir' onclick='adiciona()'/>
<br />
</div>
</div>
</div>
___________________________________________________________________________________________________________________


O codigo esta do jeito que imaginava, mas o problema é que, quando adiciono mais uma linha e acrescento os dados na hora de salvar no banco de dados sempre salva somente a ultima linha. e os primeiros dados ficam perdido.

Agradeço a ajuda !
Responder Citar
Wéllingthon M. de Souza
Re: Adicionar Input dinamicamente
29 de June de 2015 às 01:48PM
Bom dia, João Filho.

o que você tem que fazer é o seguinte, como você esta adicionando mais campos, então isso vai fazer com que eles se tornem array.

então em seu Javascript os nomes(name) dos campos tem que ter [] na frente, tipo esse exemplo:

novaCelula.innerHTML = "<input id='descricaoItem"+totals+"' type='text' class='span12' name='descricaoItem[]' value='' />";

e em sua pagina que vai receber os dados enviados pelo form você tera que fazer um for ou foreach.

Espero ter ajudado.
Responder Citar
Tópico mais recente Tópico mais antigo
Você precisa estar logado no PHPBrasil.com para poder enviar mensagens para os nossos fóruns.

Faça o login aqui.