Formulrios dinmicos com Ajax e PHP

Em 05/07/2010

Iniciaremos ento com a criao do formulrio: Vale ressaltar que no 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>Comentrio :<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 formulrio composto por trs campos (dois input e um textarea) e um boto (button). Aps o form, utilizaremos um <span> com id para que possamos validar e informar ao usurio o que est acontecendo. Vamos ento a validao dos dados do formulrio e a definio 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 existncia 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 funo ajax

insereDadosAjax('ajax_insere.php?nome='+escape(nm)+'&email='+em+'&com='+ escape(co)); } } Para entender melhor as funes ajax, precisaremos esclarecer sobre "Estado das Requisies Ajax". Toda vez que fazemos uma chamada ajax ela passa por 4 estados bsicos que so eles: 1. Sendo enviado 2. Processando 3. Armazenando 4. Pronto Abaixo, temos duas funes para trabalhar com a tecnologia ajax que so elas: 1. insereDadosAjax(url) 2.insereDadosAjaxVer() A primeira responsvel por criar, abrir e enviar a requisio; A segunda fica responsvel por acompanhar as mudanas de estados da requisio. Trocando em miudos, a primeira cria e envia... a segunda fica escutando e chamada a cada modificao do estado (que vai de 1 a 4 conforme informado anteriormente). Funes para as requisies Ajax: function insereDadosAjax(url) { ajxEnv = null; if (window.XMLHttpRequest) // Requisio Ajax para MOZILA { ajxEnv = new XMLHttpRequest(); ajxEnv.onreadystatechange = insereDadosAjaxVer; ajxEnv.open("GET",url,true); ajxEnv.send(null); } else if (window.ActiveXObject) // Requisio 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 no foi completada a requisio if(ajxEnv.readyState != 4) { //Mostrando mensagem para o usurio document.getElementById('resForm').innerHTML = 'Aguarde... Enviando dados.'; } //Verificando se o estado igual a 4, ou seja, requisio completada com sucesso. if (ajxEnv.readyState == 4) { //Em caso de requisio completa, apenas informamos ao usurio 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: Informao importante: Na validao do formulrio, aps verificar todos os campos, chamamos a funo responsvel por criar a requisio ajax passando como parmetro o nome da pagina php (ajax_insere.php) e os dados capturados do formulrio conforme abaixo: insereDadosAjax('ajax_insere.php?nome='+escape(nm)+'&email='+em+'&com='+es cape(co)); Um detalhe importante que muita gente quebra a cabea com a acentuao com ajax. Para solucionar este problema utilizaremos a funo 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 mtodo 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 pginas. Espero que aproveitem (((: At