Cachina’s Programming Blog


Envio de E-mail com Jquery e PHP

Posted in Dicas,JAVASCRIPT,PHP por Mayron Cachina em junho 1, 2009
Tags: , ,

Esse é um pequeno exemplo de como você pode integrar Ajax e PHP para enviar um e-mail.

Vamos comentar um pouco o código:

Contato.php

<div id="resposta"></div>
<div id="formulario">
<p><label for="nome" id="lbnome"><strong>Nome:</strong></label></p>
<p><input type="text" id="nome" name="nome" /></p>
<p><label for="email" id="lbemail"><strong>E-mail:</strong></label></p>
<p><input type="text" id="email" name="email" /></p>
<p><label for="mensagem" id="lbmensagem"><strong>Mensagem:</strong></label></p>
<p><textarea id="mensagem"></textarea></p>
<p><input type="button" alt="Enviar" id="submit" value="Enviar" /></p>
</div>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#resposta").ajaxStart(function(){ jQuery(this).html("Mensagem sendo enviada, por favor aguarde..."); });
jQuery('#submit').click(function() {
var nome     = jQuery('#nome').val();
var email    = jQuery('#email').val();
var mensagem = jQuery('#mensagem').val();
jQuery.post('mail.php',
{ nome: nome, email: email, mensagem: mensagem, contato: true },
function(data, textStatus) {
jQuery('#resposta').html(data);
});
return false;
});
});
</script>

Explicação do código a cima:

Após isso criaremos o formulário para contato. Não é obrigatório colocar a tag <form> pois vamos pegar os valores pelo ID dos campos, por isso é importante sempre colocar os id´s no input 🙂

Para tudo funcionar deve-se primeiramente ter adicionado a biblioteca jquery.
<script type="text/javascript" src="jquery.js"></script>

A <div id=”resposta”> é muito importante. É nela que vai ser mostradas as informações que vão ser processadas do php.

A função:

jQuery('#submit').click(function() {...

Nada mais é do que pegar o botão e executar um POST assincrono.

var nome     = jQuery('#nome').val();
var email    = jQuery('#email').val();
var mensagem = jQuery('#mensagem').val();

Pega os valores dos inputs (por isso tem que ter os ids)…

jQuery.post('mail.php',
{ nome: nome, email: email, mensagem: mensagem, contato: true },
function(data, textStatus) {

Envia o post ao arquivo mail.php

jQuery('#resposta').html(data);

retorna os dados em formato html para a div resposta. Por isso eu disse que ela é importante.

No arquivo mail.php nada mais é do que um script php com um tratamento de erros e uma validação com expressão regular de e-mail com envio.

Baixe o exemplo aqui ou veja uma demonstração.

Site com Plugins JavaScript

Posted in Dicas,JAVASCRIPT por Mayron Cachina em maio 29, 2009
Tags:

Precisando de um plugin para incrementar seu site?!
Confiram o site HotAjax! muito bom com vários plugins em Jquery e Moontools.


Entrar no site

Google Chart API – Parte 1

Posted in Artigos,Dicas,JAVASCRIPT por Mayron Cachina em março 27, 2008
Tags: , , ,

Hoje vamos tem uma introdução a uma API para gerar gráficos…

O Google Chart é uma API para gerar gráficos dinâmicos online. Através de uma url você pode configurar e usar-la.
API retorna uma imagem do tipo Png. Diversos tipos de imagem podem ser gerados: linha, barra, e etc. Para cada tipo da imagem você pode especificar atributos tais como o tamanho, as cores, e os rótulos.

Exemplo:
(more…)

Impressão com JavaScript

Posted in Dicas,JAVASCRIPT por Mayron Cachina em março 18, 2008
Tags: ,

Estava precisando aqui no trabalho e quem sabe alguem mais precise…

Em um link:

<input type="button" value="Imprimir"
onclick="javascript:window.print()">

Ao Carregar a página:

<BODY onload=printPage()><SCRIPT language=JavaScript>

<!--

function printPage() {

if (window.print) {

agree = confirm('Deseja imprimir essa página ?');

if (agree) window.print();

   }

}

// -->

</SCRIPT>

Abrir opções da impressoa:

<script language="JavaScript">

function visualizarImpressao(){

 var Navegador = '<object id="Navegador1" width="0" height="0"

 classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></object>';

 document.body.insertAdjacentHTML('beforeEnd', Navegador);

 Navegador1.ExecWB(7, 1);

 Navegador1.outerHTML = "";

}

</script>

<input type=”button” onclick=”visualizarImpressao();” 
value=”Visualizar Impressão” />

Slides sobre Jquery

Posted in JAVASCRIPT,PHP por Mayron Cachina em março 11, 2008
Tags: , ,

Paginação e Ordenação rápida com JQuery – Plugin Tablesorter

Posted in JAVASCRIPT por Mayron Cachina em janeiro 9, 2008
Tags: , , , ,

Pessoal, conheci essa biblioteca JavaScript só faz uma semana e ela já me quebrou um galho muito grande que a meses estava com preguiça de implementar na mão, hehehe Então mãos a obra (não irei explicar o JQuery nesse tópico, em outro faço uma breve introdução)…

1 – Precisamos das biblioteca e de seus plugins:

Bibliotecas JQuery

(more…)