Formulários com XAJAX
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↳PHP44 conteúdosPadronizando seu código com PHP CS FixerDev (Back & Front) · mai 2019Docker de imagem. Para rodar projetos PHP em menos de 30 segundosDev (Back & Front) · jan 2026PHP 7.3: conheça as novidades desta versãoDev (Back & Front) · abr 2019Ver tudo em Dev (Back & Front) →, 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!
Como monitorar eventos da blockchain com ReactJS e Web3.js
10 bibliotecas do iOS que você deve substituir antes de 2025
Seu frontend virou uma camada de integração?
Código que faz sentido não basta: o que TypeScript revela sobre programar com IA
John CalistroProgramação como Arte
Cesar GimenesJavaScript – Arrow Functions
José Carlos MacorattiBlazor – Interatividade Global e por página
José Carlos Macoratti
