Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Douglas Dall'Agnol

Adicionar/Remover grupo de campos de um form.

Recommended Posts

Olá pessoal!

 

É o seguinte: to criando um formulário de cadastro para um site. Entre as opções do formulário, quem se cadastra deve informar alguns cursos que já realizou. A idéia é deixar visível um fieldset com os campos (Curso, Local, Nível e Carga Horária)para 1 curso, e uma opção para adicionar mais cursos. O limite seria de 4 cursos, então 1 curso visível + 3 ocultos, que são exibidos conforme a pessoa clica em adicionar. Os dados serão enviados por email.

 

A idéia do cliente é fazer algo parecido com -> Este Cadastro <-. Observem que a opção Informática, por exemplo tem um botão abaixo dos inputs, chamado "Adicionar Item" e ao clicar, a opção "Remover Item" também aparece.

 

Até encontrei alguns js por aí na internet semelhantes, mas não consegui fazer com que houvesse limite na adição de campos, e isso dificulta o envio do email com os dados.

 

Espero que possam me indicar alguma idéia pessoal, pois não sei como criar um js que faça isso.

 

Agradeço muito, valeu!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Postei no link que você passou os arquivos do formulário, precisaria que um dos fieldsets desse formulário tivesse essa opção.

 

Thiago:

 

Segui as dicas do link que você me passou e criei um formuario com base no javascript do klonder, conforme este codigo, o resultado foi este aqui:

 

formulario.html

 

<html> <head> <script type="text/javascript"> var qtdeCampos = 0;  function addCampos() { var objPai = document.getElementById("campoPai"); //Criando o elemento DIV; var objFilho = document.createElement("div"); //Definindo atributos ao objFilho: objFilho.setAttribute("id","filho"+qtdeCampos);  //Inserindo o elemento no pai: objPai.appendChild(objFilho); //Escrevendo algo no filho recém-criado: document.getElementById("filho"+qtdeCampos).innerHTML = "<fieldset><legend>Cursos Realizados</legend><label>Curso: <input type='text' id='curso"+qtdeCampos+"' name='campo[]'></label><br /><label>Local: <input type='text' id='local"+qtdeCampos+"' name='campo[]'></label><br /> <label>Nivel: <input type='text' id='nivel"+qtdeCampos+"' name='campo[]'></label><br /> <label>Carga Horária: <input type='text' id='carga"+qtdeCampos+"' name='campo[]'></label><br /></fieldset> <input type='button' onclick='removerCampo("+qtdeCampos+")' value='Apagar campo'>"; qtdeCampos++; }  function removerCampo(id) { var objPai = document.getElementById("campoPai"); var objFilho = document.getElementById("filho"+id);  //Removendo o DIV com id específico do nó-pai: var removido = objPai.removeChild(objFilho); } </script> <title>Formulário de Cadastro</title></head> <body> <form name="form1" action="pegardados.php" method="post"> <fieldset><legend>Dados Pessoais</legend> <label>Nome: <input name="nome" type="text" /> </label><br /> <label>Endereço: <input name="endereco" type="text" /> </label><br /> <label>E-Mail: <input name="email" type="text" /> </label><br /> <label>Nascimento: <input name="nascimento" type="text" /> </label><br /> </fieldset><br /> <div id="campoPai"></div> <input type="button" value="Adicionar campos" onClick="addCampos()"> <br><br><input type="submit" value="Enviar"> </form> </body> </html>

 

 

pegardados.php

 

Recuperando os valores que foram enviados pelo form:  <?php if(isset($_POST["campo"])) {     echo "Os campos que você adicionou são:<br><br>";          // Faz loop pelo array dos campos:     foreach($_POST["campo"] as $campo) {         echo $campo."<br>";     } }else{         echo "Você não adicionou dados em nenhum campo!"; } ?>

 

 

Os dados aparecem no pegardados.php, mas tentei de umas 10 formas capturar os dados de cada campo do fieldset para organizá-los e enviá-los por email, e eles sempre ficam em branco, os únicos que chegam são os dados pessoais.

 

Tem alguma idéia de como posso fazer o php pegar os nomes dos campos e enviá-los por email?

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.