[Resolvido] Como enviar dados de form via Java Script?

Sidrolan · Março 21, 2008

Prezados Participantes do Fórum,

Possuo um formulário que calcula diversos valores de produtos e mostra o resultado de acordo com os valores e as quantidades e está funcionando direitinho.

Até aí tudo bem.. Só que eu quero que estes dados sejam enviados para meu email. Eu tento colocar um form para envio dos campos do formulário porém, o código deixa de funcionar e aparece erro na barra de status. Existe uma forma de enviar os resultados gerados nos campos deste formulário, seja por form ou mesmo uma janela pop ou por um link simples? Gostaria de uma orientação.

Eis o código

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>

<title><<<<<<< Calcular Pedido >>>>>>>></title>
<script language="JAVASCRIPT">
<!--
function calcula(){
val1=1.10*QT1.value
val2=0.45*QT2.value
val3=2.33*QT3.value
val4=5.20*QT4.value
val5=0.71*QT5.value
ST1.value=forma(val1)
ST2.value=forma(val2)
ST3.value=forma(val3)
ST4.value=forma(val4)
ST5.value=forma(val5)
total.value=forma(val1+val2+val3+val4+val5)
}
function forma(num){
reais=Math.floor(num)
cents=Math.round((num-reais)*100)
texto=reais+"."
if(cents<10){
texto=texto+"0"
}
texto=texto+cents
return texto
} 

// Funcao para Limpar os Campos
function Limpar()
{
QT1.value = ""
QT2.value = ""
QT3.value = ""
QT4.value = ""
QT5.value = ""
ST1.value = ""
ST2.value = ""
ST3.value = ""
ST4.value = ""
ST5.value = ""
total.value = ""
}




//-->
</script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<p> </p>

<table border="2" width="100%" bgcolor="#C0C0C0" bordercolor="#000080">
  <tr>
	<td width="100%" colspan="4"><p align="center"><big><big><big><strong>SUPERMERCADO TESTE</strong></big></big></big></td>
  </tr>
  <tr>
	<td width="25%"><font color="#FF0000"><big><strong>PRODUTO</strong></big></font></td>
	<td width="25%"><font color="#FF0000"><big><strong>PREÇO</strong></big></font></td>
	<td width="25%"><font color="#FF0000"><big><strong>QUANTIDADE</strong></big></font></td>
	<td width="25%"><font color="#FF0000"><big><strong>SUB-TOTAL</strong></big></font></td>
  </tr>
  <tr>
	<td width="25%"><strong>Guarana 2litros</strong></td>
	<td width="25%"><strong>R$ 1,10</strong></td>
	<td width="25%" align="right"><select name="QT1" size="1">
	  <option value="00">00</option>
	  <option value="01">01</option>
	  <option value="02">02</option>
	  <option value="03">03</option>
	  <option value="04">04</option>
	  <option value="05">05</option>
	  <option value="06">06</option>
	  <option value="07">07</option>
	  <option value="08">08</option>
	  <option value="09">09</option>
	  <option value="10">10</option>
	</select></td>
	<td width="25%"><strong><input type="text" name="ST1" size="20"></strong></td>
  </tr>
  <tr>
	<td width="25%"><strong>Sabão em Pó</strong></td>
	<td width="25%"><strong>R$ 0,45</strong></td>
	<td width="25%" align="right"><select name="QT2" size="1">
	  <option value="00">00</option>
	  <option value="01">01</option>
	  <option value="02">02</option>
	  <option value="03">03</option>
	  <option value="04">04</option>
	  <option value="05">05</option>
	  <option value="06">06</option>
	  <option value="07">07</option>
	  <option value="08">08</option>
	  <option value="09">09</option>
	  <option value="10">10</option>
	</select></td>
	<td width="25%"><strong><input type="text" name="ST2" size="20"></strong></td>
  </tr>
  <tr>
	<td width="25%"><strong>Arroz</strong></td>
	<td width="25%"><strong>R$ 2,33</strong></td>
	<td width="25%" align="right"><select name="QT3" size="1">
	  <option value="00">00</option>
	  <option value="01">01</option>
	  <option value="02">02</option>
	  <option value="03">03</option>
	  <option value="04">04</option>
	  <option value="05">05</option>
	  <option value="06">06</option>
	  <option value="07">07</option>
	  <option value="08">08</option>
	  <option value="09">09</option>
	  <option value="10">10</option>
	</select></td>
	<td width="25%"><strong><input type="text" name="ST3" size="20"></strong></td>
  </tr>
  <tr>
	<td width="25%"><strong>Sabonete</strong></td>
	<td width="25%"><strong>R$ 5,20</strong></td>
	<td width="25%" align="right"><select name="QT4" size="1">
	  <option value="00">00</option>
	  <option value="01">01</option>
	  <option value="02">02</option>
	  <option value="03">03</option>
	  <option value="04">04</option>
	  <option value="05">05</option>
	  <option value="06">06</option>
	  <option value="07">07</option>
	  <option value="08">08</option>
	  <option value="09">09</option>
	  <option value="10">10</option>
	</select></td>
	<td width="25%"><strong><input type="text" name="ST4" size="20"></strong></td>
  </tr>
  <tr>
	<td width="25%"><strong>Vinho Tinto</strong></td>
	<td width="25%"><strong>R$ 0,71</strong></td>
	<td width="25%" align="right"><select name="QT5" size="1">
	  <option value="00">00</option>
	  <option value="01">01</option>
	  <option value="02">02</option>
	  <option value="03">03</option>
	  <option value="04">04</option>
	  <option value="05">05</option>
	  <option value="06">06</option>
	  <option value="07">07</option>
	  <option value="08">08</option>
	  <option value="09">09</option>
	  <option value="10">10</option>
	</select></td>
	<td width="25%"><strong><input type="text" name="ST5" size="20"></strong></td>
  </tr>
  <tr>
	<td width="25%"><input type="button" value="Calcular Total" name="B1" onClick="calcula()">
	       
	  <input name="button" type="button" class="inputesp"  onClick="java script: Limpar()" value="Limpar">
	         </td>
	<td width="25%"> </td>
	<td width="25%" align="right"> </td>
	<td width="25%"> </td>
  </tr>
  <tr>
	<td width="25%"><strong>Total  <input type="text" name="total" size="15"></strong></td>
	<td width="25%"> </td>
	<td width="25%"> </td>
	<td width="25%"> </td>
  </tr>
</table>

<p> </p>
</body>
</html>

Obrigado a todos

andreia_sp · Março 22, 2008

Qual é o erro que aparece?

Sidrolan · Março 22, 2008

Obrigado por responder...

O erro aparece na barra de status, onde aparece "concluído" ao lado do simbolo do I. Exp. e ao clicar mostra um aviso de objeto não encontrado. Quero pegar os resultados obtidos ao clicar em "calcular" e enviar para um email. O script não aceita um <form> </form> e pára de funcionar. Será que tem um jeito de enviar os conteúdos obtidos por meio de um link? Quero evitar de que um visitante tenha que redigitar os resultados em outra página ou formulário. Obrigado.

Carlos

andreia_sp · Março 22, 2008

Eu testei no IE e funcionou perfeitamente, somente no Firefox que deu erro. Coloque id nos objetos com o mesmo nome do name. exemplo:

<input type="text" name="total" id="total" size="15">

Sidrolan · Março 22, 2008

Eu testei no IE e funcionou perfeitamente, somente no Firefox que deu erro. Coloque id nos objetos com o mesmo nome do name. exemplo:

<input type="text" name="total" id="total" size="15">

A calculadora funciona sim..tem como pegar os resultados obtidos e enviar através de um link em tranforma´las em variáveis e com isso poder envia-las por email? Tenho pesquisado na Net, mas não achei ainda algum exemplo prático.

Valew

andreia_sp · Março 23, 2008

pera, você quer enviar email soh com javascript? Nao tem jeito, pelo q sei... você precisa usar uma linguagem de programação tipo ASP, PHP, Vb.net, java,...

Sidrolan · Março 23, 2008

pera, você quer enviar email soh com javascript? Nao tem jeito, pelo q sei... você precisa usar uma linguagem de programação tipo ASP, PHP, Vb.net, java,...

Sim, sei que em Javascript não tem suporte para envio de email. O que eu gostaria de saber é se existe uma função no Javascript para eu capturar os resultados dos campos e passar para uma outra página como variáveis e aí sim, tentar enviar por PHP. Por exemplo, será que não existe meio de passar os dados dos campos através de um link, tipo GET:

link?=dado1&dado2&dado3..etc etc..

Se não existe, o jeito vai ser eu montar um script que realize a mesma coisa que o Javascript....de volta a velha prancheta.....

Obrigado.

andreia_sp · Março 23, 2008

Entao, você tem que ter uma tag de form, de preferencia usar o method post. Coloque um botao de subtmit ou entao um button que ao clicar nele, ele dará o submit no seu formulario.

hinom · Março 23, 2008

no inicio do codigo coloque, antes do primeiro campo

<form name=frm1 id=frm1 action=caminhoDoScript method=post>

no final, depois do último campo

</form>

obs: ante de </form> adicione um botão com o tipo SUBMIT

<input type=submit value=enviar>

Sidrolan · Março 23, 2008

no inicio do codigo coloque, antes do primeiro campo

<form name=frm1 id=frm1 action=caminhoDoScript method=post>

no final, depois do último campo

</form>

obs: ante de </form> adicione um botão com o tipo SUBMIT

<input type=submit value=enviar>

Bom...vou tentar fazer isso.....qto a resposta da andreia_sp, já tentei colocar uma tag form, mas o sistema pára de funcionar ou seja, não aparece os resultados qdo se clica no botão calcula. Esse método do hinom vou tentar ver se envia os campos..

Obrigado.

hinom · Março 23, 2008

qto a resposta da andreia_sp, já tentei colocar uma tag form, mas o sistema pára de funcionar ou seja, não aparece os resultados qdo se clica no botão calcul

isso acontece porque o script está acessando os objetos de forma errada.

Sidrolan · Março 23, 2008

no inicio do codigo coloque, antes do primeiro campo

<form name=frm1 id=frm1 action=caminhoDoScript method=post>

no final, depois do último campo

</form>

obs: ante de </form> adicione um botão com o tipo SUBMIT

<input type=submit value=enviar>

Bom...vou tentar fazer isso.....qto a resposta da andreia_sp, já tentei colocar uma tag form, mas o sistema pára de funcionar ou seja, não aparece os resultados qdo se clica no botão calcula. Esse método do hinom vou tentar ver se envia os campos..

Obrigado.

Coloquei as linhas descritas, mas não deu certo. Seria posível ao amigo colocar as alterações e fazer um teste? O script em Jscript não aceita as tags de jeito nenhum...acho que vou ter que apelar para o PHP e Banco de Dados....parece uma coisa simples fazer o envio,...mas creio que seja algo impossível...de qualquer forma grato pelo apoio.

hinom · Março 24, 2008

acho que vou ter que apelar para o PHP e Banco de Dado

???

o problema agora é o acesso a objetos

se anteriormente o objeto A estava na raíz, agora ele está dentro de outro objeto. entendeu ?

estrutura anterior

WINDOW
   ->DOCUMENT
	   -> objeto INPUT

método de acesso:

WINDOW.DOCUMENT.objetoINPUT ou DOCUMENT.objetoINPUT ou objetoINPUT

estrutura atual

WINDOW
   ->DOCUMENT
		-> objeto FORM
		   -> objeto INPUT

modo como deve ser feito o acesso:

DOCUMENT.DOCUMENT.objetoFORM.objetoINPUT

dajoso · Junho 14, 2008

Prezados Participantes do Fórum,

Possuo um formulário que calcula diversos valores de produtos e mostra o resultado de acordo com os valores e as quantidades e está funcionando direitinho.

Até aí tudo bem.. Só que eu quero que estes dados sejam enviados para meu email. Eu tento colocar um form para envio dos campos do formulário porém, o código deixa de funcionar e aparece erro na barra de status. Existe uma forma de enviar os resultados gerados nos campos deste formulário, seja por form ou mesmo uma janela pop ou por um link simples? Gostaria de uma orientação.

Eis o código

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>

<title><<<<<<< Calcular Pedido >>>>>>>></title>
<script language="JAVASCRIPT">
<!--
function calcula(){
val1=1.10*QT1.value
val2=0.45*QT2.value
val3=2.33*QT3.value
val4=5.20*QT4.value
val5=0.71*QT5.value
ST1.value=forma(val1)
ST2.value=forma(val2)
ST3.value=forma(val3)
ST4.value=forma(val4)
ST5.value=forma(val5)
total.value=forma(val1+val2+val3+val4+val5)
}
function forma(num){
reais=Math.floor(num)
cents=Math.round((num-reais)*100)
texto=reais+"."
if(cents<10){
texto=texto+"0"
}
texto=texto+cents
return texto
} 

// Funcao para Limpar os Campos
function Limpar()
{
QT1.value = ""
QT2.value = ""
QT3.value = ""
QT4.value = ""
QT5.value = ""
ST1.value = ""
ST2.value = ""
ST3.value = ""
ST4.value = ""
ST5.value = ""
total.value = ""
}




//-->
</script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<p> </p>

<table border="2" width="100%" bgcolor="#C0C0C0" bordercolor="#000080">
  <tr>
	<td width="100%" colspan="4"><p align="center"><big><big><big><strong>SUPERMERCADO TESTE</strong></big></big></big></td>
  </tr>
  <tr>
	<td width="25%"><font color="#FF0000"><big><strong>PRODUTO</strong></big></font></td>
	<td width="25%"><font color="#FF0000"><big><strong>PREÇO</strong></big></font></td>
	<td width="25%"><font color="#FF0000"><big><strong>QUANTIDADE</strong></big></font></td>
	<td width="25%"><font color="#FF0000"><big><strong>SUB-TOTAL</strong></big></font></td>
  </tr>
  <tr>
	<td width="25%"><strong>Guarana 2litros</strong></td>
	<td width="25%"><strong>R$ 1,10</strong></td>
	<td width="25%" align="right"><select name="QT1" size="1">
	  <option value="00">00</option>
	  <option value="01">01</option>
	  <option value="02">02</option>
	  <option value="03">03</option>
	  <option value="04">04</option>
	  <option value="05">05</option>
	  <option value="06">06</option>
	  <option value="07">07</option>
	  <option value="08">08</option>
	  <option value="09">09</option>
	  <option value="10">10</option>
	</select></td>
	<td width="25%"><strong><input type="text" name="ST1" size="20"></strong></td>
  </tr>
  <tr>
	<td width="25%"><strong>Sabão em Pó</strong></td>
	<td width="25%"><strong>R$ 0,45</strong></td>
	<td width="25%" align="right"><select name="QT2" size="1">
	  <option value="00">00</option>
	  <option value="01">01</option>
	  <option value="02">02</option>
	  <option value="03">03</option>
	  <option value="04">04</option>
	  <option value="05">05</option>
	  <option value="06">06</option>
	  <option value="07">07</option>
	  <option value="08">08</option>
	  <option value="09">09</option>
	  <option value="10">10</option>
	</select></td>
	<td width="25%"><strong><input type="text" name="ST2" size="20"></strong></td>
  </tr>
  <tr>
	<td width="25%"><strong>Arroz</strong></td>
	<td width="25%"><strong>R$ 2,33</strong></td>
	<td width="25%" align="right"><select name="QT3" size="1">
	  <option value="00">00</option>
	  <option value="01">01</option>
	  <option value="02">02</option>
	  <option value="03">03</option>
	  <option value="04">04</option>
	  <option value="05">05</option>
	  <option value="06">06</option>
	  <option value="07">07</option>
	  <option value="08">08</option>
	  <option value="09">09</option>
	  <option value="10">10</option>
	</select></td>
	<td width="25%"><strong><input type="text" name="ST3" size="20"></strong></td>
  </tr>
  <tr>
	<td width="25%"><strong>Sabonete</strong></td>
	<td width="25%"><strong>R$ 5,20</strong></td>
	<td width="25%" align="right"><select name="QT4" size="1">
	  <option value="00">00</option>
	  <option value="01">01</option>
	  <option value="02">02</option>
	  <option value="03">03</option>
	  <option value="04">04</option>
	  <option value="05">05</option>
	  <option value="06">06</option>
	  <option value="07">07</option>
	  <option value="08">08</option>
	  <option value="09">09</option>
	  <option value="10">10</option>
	</select></td>
	<td width="25%"><strong><input type="text" name="ST4" size="20"></strong></td>
  </tr>
  <tr>
	<td width="25%"><strong>Vinho Tinto</strong></td>
	<td width="25%"><strong>R$ 0,71</strong></td>
	<td width="25%" align="right"><select name="QT5" size="1">
	  <option value="00">00</option>
	  <option value="01">01</option>
	  <option value="02">02</option>
	  <option value="03">03</option>
	  <option value="04">04</option>
	  <option value="05">05</option>
	  <option value="06">06</option>
	  <option value="07">07</option>
	  <option value="08">08</option>
	  <option value="09">09</option>
	  <option value="10">10</option>
	</select></td>
	<td width="25%"><strong><input type="text" name="ST5" size="20"></strong></td>
  </tr>
  <tr>
	<td width="25%"><input type="button" value="Calcular Total" name="B1" onClick="calcula()">
	       
	  <input name="button" type="button" class="inputesp"  onClick="java script: Limpar()" value="Limpar">
	         </td>
	<td width="25%"> </td>
	<td width="25%" align="right"> </td>
	<td width="25%"> </td>
  </tr>
  <tr>
	<td width="25%"><strong>Total  <input type="text" name="total" size="15"></strong></td>
	<td width="25%"> </td>
	<td width="25%"> </td>
	<td width="25%"> </td>
  </tr>
</table>

<p> </p>
</body>
</html>

Obrigado a todos

Cara tenho pouca experiencia mas acho que posso te ajudar. Eu fiz uma esquema que ele manda qualquer formulario por email. Olha só

Esses é o codigo em php pra mandar o bendito email.

crie um arquivo em php com o nome enviar_pedido.php e coloca esses dados nele

<?php

$msg = "Nome completo do remetente nome:\t$_POST[nome]\n";

$msg = "\t$_POST[area]\n";

// Usa dois caracteres de nova linha ao final do conteúdo,

// ou insere espaço adicionar

$cabecalho = "From: De quem está emviando\n";

$cabecalho .= "Reply-To: $_POST[nome]\n\n";

mail("$_POST,seuemail@seuprovedor.com", "Pedido de: $_POST[nome]", $msg, $cabecalho);