Olá Pessoal. Obrigado pelos comentários e pelos e-mails recebidos nas últimas semanas. Neste artigo iremos estudar como enviar as informações de vários campos em nosso formulário, para nossa função PHP, sem que haja um submit.
No artigo anteior vimos podemos fazer isso utilizando-se comando em javascript que pegam o conteúdo(value) do campo e passa para função, mas temos que concordar que se nosso formulário tiver uma quantidade grande de campos isso fica inviável, já que a quantidade de parametros na chamada da função xajax_() irá ficar enorme. O XAJAX então tem uma função para contornar isso: xajax.getFormValues(‘formID’).
Esta função pega todos os campos com seus valores atuais e retorna um array com essas informações. Após isso é só tratar esse array e extrair as informações que são de nosso interesse. Vamos ao exemplo.
Interface do formulário form.php
form.php
<?php
require "./library/xajax/xajax_core/xajax.inc.php";
require "./library/validacoes.php";
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FORMULÁRIOS COM XAJAX - PARTE 2</title>
<?php ajax->printJavascript('./library/xajax/'); ?>
</head>
<body>
<form id="form" name="form" method="post" action="">
<table width="300" border="0" align="center" cellpadding="1" cellspacing="1">
<tr>
<td colspan="2"><p>FORMULÁRIOS COM XAJAX - PARTE 2</p>
<p>Validado o formulário </p></td>
</tr>
<tr>
<td width="73">nbsp;</td>
<td width="220"><label id="resultado"></label></td>
</tr>
<tr>
<td align="right">Nome:</td>
<td><input name="nome" type="text" id="nome" size="25" maxlength="50" /></td>
</tr>
<tr>
<td align="right">Sexo:</td>
<td><input name="sexo" type="radio" value="Masculino">
Masculino
<input name="sexo" type="radio" value="Feminino">
Feminino </td>
</tr>
<tr>
<td align="right">E-Mail:</td>
<td><input name="email" type="text" id="email" size="25" maxlength="75" /></td>
</tr>
<tr>
<td align="right">Telefone:</td>
<td><input name="telefone" type="text" id="telefone" size="25" maxlength="75" /></td>
</tr>
<tr>
<td>nbsp;</td>
<td><input name="btn" type="button" value="Enviar Dados" onclick="xajax_enviarDados(xajax.getFormValues('form'));"/></td>
</tr>
</table>
</form>
</body>
</html>
Nesse formulário com o name = “form”, nós temos 4 campos, com os respectivos name’s:
-> nome
-> sexo
-> telefone
Linha 42
-> Essa é a linha na qual tem a chamada da função xajax_enviarDados(xajax.getFormValues(‘form’));, onde a função xajax.getFormValues(‘form’) irá pegar todos os campos e valores e retornar esse array de informações para uma variável que está lá na nossa função em PHP, que veremos a seguir.
validacoes.php
<?php
ajax = new xajax();
// Registra as funções no javascript
ajax->registerFunction("enviarDados");
// FUNÇÕES JAVASCRIPT REGISTRADAS PELO XAJAX
function enviarDados(formData){
// Instancia o objeto XAJAX response com
// codificação padrão ISO-8859-1
objResponse = new xajaxResponse('ISO-8859-1');
// Inicializa a variável de resultado
res = "";
// Cria uma variável para cada campo
// com o nome do ID do campo, ex.: nome, email
foreach(formData as chave => valor){
chave = valor;
}
// Verifica os campos e atribui strings a res
if(nome == false)
res .= "Preencha o campo nome<br />\n";
if(sexo == false)
res .= "Selecione um sexo<br />\n";
if(email == false)
res .= "Preencha o campo e-mail<br />\n";
if(telefone == false)
res .= "Preencha o campo telefone<br />\n";
// Verifica res
if(empty(res))
res = "<font color=green>Formulário preenchido com sucesso!</font>";
else
res = "<font color=red>".res."</font>";
// Atribui a variável res ao label resultado
objResponse->assign('resultado', 'innerHTML', res);
// Retorna a resposta de XML gerada pelo
// objeto do xajaxResponse
return objResponse;
}
// Manda o ajax processar os pedidos acima
ajax->processRequest();
?>
Linhas 2 e 5
-> Instânciamos o objeto do XAJAX e registramos a função enviarDados no XAJAX;
Linha 11
-> Declaramos a função enviarDados, e no parametro a variável formData quer irá receber o array com todos os campos e informações do formulário;
Linha 15
-> Instancia o objeto XAJAX response com codificação padrão ISO-8859-1;
Linhas 19 a 21
-> Com um foreach() nós percorremos o array formData e criamos as variáveis de cada campo do formulário, com nomes iguais ao dos campos. Conseguimos isso utilizando o recurso de “”, mais conhecido como variável da variável.
-> formData[‘nome’] = “André Luiz”;
-> Olhem isso! ‘nome’ é uma chave (índice) da variável formData, e ‘André Luiz’ um valor dentro da chave (índice) ‘nome’.
-> Então isso: chave = valor;, seria o mesmo que: nome = ‘André Luiz’; Todos concordam? Se não concorda, leia tudo de novo! Isso é feito para todos os campos do formulário.
Linhas 24 a 40
-> Nestas linhas fazemos somente a verificação se os campos estão vázios e montamos na variável res a mensagem de resposta;
Linha 43
-> Atribuimos a variável res ao label resultado;
Linhas 47 a 52
-> Finalizamos o código com as respostas processadas.
Espero que tenha esclarecido algumas dúvidas. Para baixar o código desse artigo clique aqui. Nos próximos artigos iremos tratar mais funções de resposta, como o assign.
Um abraço!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?