sexta-feira, 29 de julho de 2011

Formulário Dinâmico, adicionando varios input text

Ola,


Estavamos com uma baita dificuldade na loja hoje, desenvolvendo um site para um cliente onde deviamos criar um formulário padrão com 6 ou 7 campos e a medida que o usuário ia clicando no botão 'incluir +1', adicionavamos mais um/dois input do tipo text no formulário.

Lembro de uma certa vez, um aluno me perguntar sobre isso.

Então ai vai a forma como eu resolvi isso... Acredito que o nome certo para isso seria Formulário Dinâmico, certo? Caso não opinem que eu mudo ;-) porque busquei na internet por formulário dinâmico e não achei nada do que precisava.

Vamos ao código:

Percebam que eu usei a passagem de parâmetro pelo método GET.
Um problema que enfrento com a programação para internet é que só durante o carregamento da página é processado o código, então como aumentar a quantidade de campos de um formulário? Resolvi isso com GET, pois a informação esta sempre acessível na URL (a GOOGLE usa o mesmo método, você pode pegar a URL gerado pelo google-maps copiar e colar em qualquer navegador que funciona, dai a dica pra resolver meu problema).

<?
$quant=0;
if (isset($_GET["quant"]))
$quant = $_GET["quant"];
?>
<html>
<head>
<title> Inscrições </title>
...
Uma função em JavaScript para que ele aumente o contador 'quant', que esta armazenado em um input do tipo hidden(escondido).
...

<script language="JavaScript">
function incluir()
{
var url = window.location;
var quant = document.inscricao.quant.value;
quant++;
document.inscricao.quant.value = quant;
document.inscricao.action=url;
document.inscricao.submit();
}
</script>
...
Vejam que eu acesso as informações com GET, caso a informação esteja acessível na URL coloco no input ou deixo em vazio. E o FOR que controla a quantidade de input´s gerados.
...

<form id="inscricao" action="cadastrar.php" method="GET" name="inscricao" />
<input type="hidden" name="quant" value="<?
if (isset($_GET["quant"]))
echo $_GET["quant"];
else
echo "0";
?>">
<? for ($i=0; $i<=$quant; $i++){ ?>
&nbsp; Nome:<input type="text"  name="nome" size="70" value="<?
if (isset($_GET["nome"]))
echo $_GET["nome"];
?>"/><br/>
&nbsp; Município:<input type="text"  name="municipio" size="60" value="<?
if (isset($_GET["municipio"]))
echo $_GET["municipio"];
?>"/><br/>
<? } ?>
<br/>

<center><input type="submit" id="mais" value="Incluir + 1" onClick="javascript:incluir();"/>
<input type="reset" id="visualizar" value="Visualizar" />
<input type="reset" id="editar" value="Editar" />
<input type="reset" id="limpar" value="Limpar" />
<input type="submit" id="gravar" value="Gravar" /></center>
   </form>

Espero realmente que tenha ajudado. Essa foi a forma que encontrei de resolver.
Ainda não pensei em como salvar esses dados no banco de dados, é um numero incerto de campos a serem salvos, mas assim que implementar o código coloco para vocês aqui.
Pensando rapidamente, acho que nem sera tão difícil pois a quantidade de campos esta guardado no campo QUANT e sera acessível na URL pelo método GET.


Um grande abraço, Emanuel

Nenhum comentário:

Postar um comentário