[Resolvido] Enviar por Email campos gerados pelo Javascript

Douglas Dall'Agnol · Maio 2, 2010

Olá Pessoal!

A alguns dias, com a ajuda aqui do fórum, consegui criar um formulário com fieldsets adicionáveis via javascript.

O problema é que tentei de inúmeras formas enviar esses dados por email via php e nada funcionou.

Peço a ajuda da comunidade para tentar descobrir onde erro.

Seguem abaixo os códigos utilizados:

formulario.html

<html>
<head>
<script src="script.js" type="text/javascript">
</script>

<title>Formulário de Cadastro</title></head>
<body>
<form name="form1" action="enviar.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 />
<fieldset><legend>Cursos Realizados</legend>
<label>Curso: <input type='text' id='curso1' name='campo[]'></label><br />
<label>Local: <input type='text' id='local1' name='campo[]'></label><br /> 
<label>Nivel: <input type='text' id='nivel1' name='campo[]'></label><br /> 
<label>Carga Horária: <input type='text' id='carga1' name='campo[]'></label><br />
</fieldset>
<div id="campoPai"></div>
<input type="button" value="Adicionar campos" onClick="addCampos()">
<br><br><input type="submit" value="Enviar">
</form>
</body>
</html>

script.js

// JavaScript Document
var qtdeCampos = 1;
function addCampos() 
{
if(qtdeCampos<"4"){

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);
}

enviar.php

<?php
$nome = $_POST ['nome'];
$endereco = $_POST ['endereco'];
$email = $_POST ['email'];
$nascimento = $_POST ['nascimento'];
$curso = $_POST ['curso1'];
$local= $_POST ['local1'];
$nivel = $_POST ['nivel1'];
$carga = $_POST ['carga1'];
$curso2 = $_POST ['curso2'];
$local2 = $_POST ['local2'];
$nivel2 = $_POST ['nivel2'];
$carga2 = $_POST ['carga2'];
$curso3 = $_POST ['curso3'];
$local3 = $_POST ['local3'];
$nivel3 = $_POST ['nivel3'];
$carga3 = $_POST ['carga3'];
$curso4 = $_POST ['curso4'];
$local4 = $_POST ['local4'];
$nivel4 = $_POST ['nivel4'];
$carga4 = $_POST ['carga4'];
$date = date("d/m/Y h:i");

$to = "contato@localhost";
$headers = "MIME-Version: 1.1\n";
$headers .= "Content-type: text/plain; charset=iso-8859-1\n";
$headers .= "From: Empresa <no-reply@empresa.com.br>\n"; // remetente
$headers .= "Return-Path: No Reply <no-reply@empresa.com.br\n"; // return-path
$subject = "Novo Cadastro";
$corpo = "Olá! Um novo cadastro foi realizado em seu site\n
Confira abaixo os dados cadastrados:\n" .
"\nDados Pessoais:\n".
"Nome Completo: $nome\n".
"Endereço: $endereco\n".
"E-Mail: $email\n".
"Nascimento: $nascimento\n".
"\nCursos Realizados:\n".
"Curso: $curso\n".
"Local: $local\n".
"Nível: $nivel\n".
"Carga Horária: $carga\n\n".
"Curso: $curso2\n".
"Local: $local2\n".
"Nível: $nivel2\n".
"Carga Horária: $carga2\n\n".
"Curso: $curso3\n".
"Local: $local3\n".
"Nível: $nivel3\n".
"Carga Horária: $carga3\n\n".
"Curso: $curso4\n".
"Local: $local4\n".
"Nível: $nivel4\n".
"Carga Horária: $carga4\n\n\n".
"Email enviado em $date";

$envio = mail($to, $subject, $corpo, $headers);

if($envio)
echo "<h1>Seu cadastro foi enviado com sucesso!</h1> Em breve você receberá um email confirmando seu cadastro";
else
echo "O cadastro não pode ser realizado.<br />Tente novamente mais tarde.";
?>

Matias Rezende · Maio 2, 2010

Olá,

Conforme o aviso existente no fórum de origem deste post, não é permitida a postagem de dúvidas nesta área, motivo pelo qual este tópico será movido para o fórum principal deste assunto.

Tópico Movido

Origem: Laboratório de scripts (PHP) http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Destino: PHP - Patrocínio: TreinaWeb

Douglas Dall'Agnol · Maio 2, 2010

Tópico em local correto, mas a duvida persiste: Alguem poderia me ajudar?

João Batista Neto · Maio 2, 2010

Douglas, veja só:

Seu Javascript:

...name='campo[]'...

Isso fará com que o campo criado dinamicamente pelo Javascript chegue ao PHP assim:

$campos = $_POST[ 'campo' ];

$campo[ 0 ]; //primeiro campo
$campo[ 1 ]; //segundo campo
$campo[ 2 ]; //terceiro campo

Porém, você está recuperando-os assim:

$campo1 = $_POST[ 'campo1' ];
$campo2 = $_POST[ 'campo2' ];

Não funciona, porque não existem esses campos.

Para que você consiga recuperar N campos, onde N é um número indefinido (adicionado pelo usuário), você precisará iterar a matriz recebida via HTTP, assim:

if ( isset( $_POST[ 'campo' ] ) && is_array( $_POST[ 'campo' ] ) ){
foreach ( $_POST[ 'campo' ] as $campo ){
	//cada ocorrência de $campo dentro desse loop será um campo adicionado pelo usuário
}
}

Douglas Dall'Agnol · Maio 2, 2010

Nesse caso, há como pegar esses dados e enviá-los de forma organizada por email?

William Bruno · Maio 3, 2010

Sim. Basta você implementar. Uma sugestão de melhoria:

<label>Curso: <input type="text" name="curso[]" /></label><br />
<label>Local: <input type="text" name="local[]" /></label><br /> 
<label>Nivel: <input type="text" name="nivel[] /"></label><br /> 
<label>Carga Horária: <input type="text" name="carga[]" /></label><br />

dessa forma, você consegue com um loop for() percorrer os campos enviados.

for( $i=0; $i<count( $_POST['curso']); $i++ )
{
  echo $_POST['curso'][$i].' - '.$_POST['local'][$i];//..segue a implementação
}

Douglas Dall'Agnol · Maio 5, 2010

Obrigado pessoal, consegui pegar os dados:

for( $i=0; $i<count( $_POST['curso']); $i++ )
{
 echo 'Curso: '.$_POST['curso'][$i].' <br>Local: '.$_POST['local'][$i]. '<br>Nivel: '.$_POST['nivel'][$i]. '<br>Carga Horaria: ' .$_POST['carga'][$i]. '<br><br>';//..segue a implementação
}

Mas esses dados somente são exibidos na tela pelo echo.

Há algum meio de pegar tudo que é exibido e, por exemplo, converter em uma variável $cursos para enviar por email?

Posso estar totalmente errado quanto ao meio, mas o objetivo é enviar esses dados por email, e futuramente para um banco de dados.

Matias Rezende · Maio 5, 2010

Troque o echo por uma atribuição com concatenação. Algo assim:

$cursos = '';
for( $i=0; $i<count( $_POST['curso']); $i++ )
{
  $cursos .= 'Curso: '.$_POST['curso'][$i].' <br>Local: '.$_POST['local'][$i]. '<br>Nivel: '.$_POST['nivel'][$i]. '<br>Carga Horaria: ' .$_POST['carga'][$i]. '<br><br>';//..segue a implementação
}
// aqui a $cursos terá tudo que foi impresso. Agora só colocar ela no corpo do e-mail pra enviar.

Carlos Eduardo

Douglas Dall'Agnol · Maio 5, 2010

Perfeito!

Funcionou muito bem!

Segue abaixo os arquivos corrigidos :)

formulario.html

<html>
<head>
<script src="script.js" type="text/javascript">
</script>

<title>Formulário de Cadastro</title></head>
<body>
<form name="form1" action="enviar.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 />
<fieldset><legend>Cursos Realizados</legend>
<label>Curso: <input type='text' id='curso' name='curso[]'></label><br />
<label>Local: <input type='text' id='local' name='local[]'></label><br /> 
<label>Nivel: <input type='text' id='nivel' name='nivel[]'></label><br /> 
<label>Carga Horária: <input type='text' id='carga' name='carga[]'></label><br />
</fieldset>
<div id="campoPai"></div>
<input type="button" value="Adicionar campos" onClick="addCampos()">
<br><br><input type="submit" value="Enviar">
</form>
</body>
</html>

script.js

// JavaScript Document
var qtdeCampos = 1;
function addCampos() 
{
if(qtdeCampos<"4"){

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='curso[]'></label><br /><label>Local: <input type='text' id='local"+qtdeCampos+"' name='local[]'></label><br /> <label>Nivel: <input type='text' id='nivel"+qtdeCampos+"' name='nivel[]'></label><br /> <label>Carga Horária: <input type='text' id='carga"+qtdeCampos+"' name='carga[]'></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);
}

enviar.php

<?php
$nome = $_POST ['nome'];
$endereco = $_POST ['endereco'];
$email = $_POST ['email'];
$nascimento = $_POST ['nascimento'];
$cursos = '';
for( $i=0; $i<count( $_POST['curso']); $i++ )
{
 $cursos .= '<strong>Curso: </strong>'.$_POST['curso'][$i].
 '<br><strong>Local: </strong>'.$_POST['local'][$i]. 
 '<br><strong>Nível: </strong>'.$_POST['nivel'][$i]. 
 '<br><strong>Carga Horária: </strong>' .$_POST['carga'][$i]. 
 '<br><br>';
}
$date = date("d/m/Y h:i");

$to = "contato@localhost";
$headers = "MIME-Version: 1.1\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\n";
$headers .= "From: Empresa <no-reply@empresa.com.br>\n"; // remetente
$headers .= "Return-Path: No Reply <no-reply@empresa.com.br\n"; // return-path
$subject = "Novo Cadastro";
$corpo = "Olá! Um novo cadastro foi realizado em seu site<br>
Confira abaixo os dados cadastrados:<br>" .
"<h3>Dados Pessoais:</h3>".
"<strong>Nome Completo: </strong>$nome<br>".
"<strong>Endereço: </strong>$endereco<br>".
"<strong>E-Mail: </strong>$email<br>".
"<strong>Nascimento: </strong>$nascimento<br>".
"<h3>Cursos Realizados:</h3>".
"$cursos<br><br>".
"Email enviado em $date";

$envio = mail($to, $subject, $corpo, $headers);

if($envio)
echo "<h1>Seu cadastro foi enviado com sucesso!</h1> Em breve você receberá um email confirmando seu cadastro";
else
echo "O cadastro não pode ser realizado.<br />Tente novamente mais tarde.";
?>

Sou muito grato, me foi muito útil.

teleree · Dezembro 29, 2010

Cara este script me ajudou muito também.

Consegui fazer o envio por e-mail da mesma forma.

Valeu!!!

Arquivado

[Resolvido] Enviar por Email campos gerados pelo Javascript

Recommended Posts

Douglas Dall'Agnol 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matias Rezende 50

Compartilhar este post

Link para o post

Compartilhar em outros sites

Douglas Dall'Agnol 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

Douglas Dall'Agnol 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Douglas Dall'Agnol 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matias Rezende 50

Compartilhar este post

Link para o post

Compartilhar em outros sites

Douglas Dall'Agnol 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

teleree 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sound Designer

Orientação - Jav + MySql

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante