Formulários dinâmicos com Ajax e PHP

Em 05/07/2010

 

Iniciaremos então com a criação do formulário:Vale ressaltar que não estou nem um pouco preocupado com design... para isso eles servem.

Aquivo: form. html

<form name="frm" action="" method="post">        <p>Nome :<input name="txtNome" id="txtNome" type="text" /></p>        <p>E-Mail :<input name="txtEmail" id="txtEmail" type="text" /></p>        <p>Comentário :<textarea name="txtComentario" id="txtComentario"></textarea></p>        <p><input name="btEnvia" type="button" value="Enviar" onClick="validaDados();" /></p></form><span id="resForm">&nbsp;</span>

Um formulário composto por três campos (dois input e um textarea) e um botão (button).Após o form, utilizaremos um <span> com id para que possamos validar e informar ao usuário o que está acontecendo.

Vamos então a validação dos dados do formulário e a definição das chamadas ajax.

Validando dados via Javascript:

function validaDados(){    //Capturando valores dos elementos do form    var nm = document.getElementById('txtNome').value;    var em = document.getElementById('txtEmail').value;    var co = document.getElementById('txtComentario').value;        //Verificando a existência de campos em branco    if(nm == "" || em == "" || co == "")    {        document.getElementById('resForm').innerHTML = 'Campos em branco! Favor preencher.';        return false;    }    else    {        document.getElementById('resForm').innerHTML = 'Enviando dados...';        //Aqui está a chamada para a função ajax

        insereDadosAjax('ajax_insere.php?nome='+escape(nm)+'&email='+em+'&com='+escape(co));    }}

Para entender melhor as funções ajax, precisaremos esclarecer sobre "Estado das Requisições Ajax". Toda vez que fazemos uma chamada ajax ela passa por 4 estados básicos que são eles:

1. Sendo enviado2. Processando3. Armazenando4. Pronto

Abaixo, temos duas funções para trabalhar com a tecnologia ajax que são elas:

1. insereDadosAjax(url)2.insereDadosAjaxVer()

A primeira é responsável por criar, abrir e enviar a requisição;A segunda fica responsável por acompanhar as mudanças de estados da requisição.

Trocando em miudos, a primeira cria e envia... a segunda fica escutando e é chamada a cada modificação do estado (que vai de 1 a 4 conforme informado anteriormente).

Funções para as requisições Ajax:

function insereDadosAjax(url){    ajxEnv = null;    if (window.XMLHttpRequest) // Requisição Ajax para MOZILA    {         ajxEnv = new XMLHttpRequest();        ajxEnv.onreadystatechange = insereDadosAjaxVer;        ajxEnv.open("GET",url,true);         ajxEnv.send(null);    }     else if (window.ActiveXObject) // Requisição Ajax para IE    {         ajxEnv = new ActiveXObject("Microsoft.XMLHTTP");         if (ajxEnv)         {            ajxEnv.onreadystatechange = insereDadosAjaxVer;             ajxEnv.open("GET",url,true);             ajxEnv.send();         }     }}

function insereDadosAjaxVer() {

    //Verifica se o estado é diferente de 4, ou seja, ainda não foi completada a requisição    if(ajxEnv.readyState != 4)    {        //Mostrando mensagem para o usuário        document.getElementById('resForm').innerHTML = 'Aguarde... Enviando dados.';    }        //Verificando se o estado é igual a 4, ou seja, requisição completada com sucesso.    if (ajxEnv.readyState == 4)    {        //Em caso de requisição completa, apenas informamos ao usuário e limpamos os campos        document.getElementById('resForm').innerHTML = 'Dados Inseridos com Sucesso';        document.getElementById('txtNome').value = '';        document.getElementById('txtEmail').value = '';        document.getElementById('txtComentario').value = '';    } }

Vamos agora para o nosso PHP:

Informação importante:Na validação do formulário, após verificar todos os campos, chamamos a função responsável por criar a requisição ajax passando como parâmetro o nome da pagina php (ajax_insere.php) e os dados capturados do formulário conforme abaixo:

insereDadosAjax('ajax_insere.php?nome='+escape(nm)+'&email='+em+'&com='+escape(co));

Um detalhe importante que muita gente quebra a cabeça é com a acentuação com ajax.Para solucionar este problema utilizaremos a função javascript escape() que consiste em codificar uma string em formato URL (o mesmo que url_encode() em php).

Aquivo: ajax_insere.php

<?    //Definindo o charset    header("Content-Type: text/html; charset=UTF-8",true);        //capturando dados enviados e decodificando o escape() do javascript    $nome = urldecode($_GET['nome']);    $email = urldecode($_GET['email']);    $com = urldecode($_GET['com']);        //Aqui vai seu método para inserir os dados no banco.

?>

Vejam que o php é bastante simples... apenas vai receber os dados passados da chamada

ajax via url (por esse motivo capturamos via get) e inseri-los no banco de dados utilizado.

Muuuuuuiiiitoooo simples e bastante funcional para envio de dados sem a necessidade de postar e recarregar páginas.

Espero que aproveitem (((:

Até