Oficina da Net

Fórum - Acesse nosso fórum, e faça suas perguntas.

Formulários AJAX

Publicado em: 02/12/2006 | Ajax | Visualizações: 8.734 | 6 Comentário(s)

Vou considerar que você já tenha sua função para criação de uma variável AJAX (XMLHttpRequest ou ActiveXObject, dependendo do browser). Caso você ainda não trabalhe com AJAX, consulte www.w3schools.com/ajax/ajax_browsers.asp. Lá existe uma função cross browsers para criação do tipo necessário em cada navegador. No meu primeiro artigo aqui no Oficina da Net mostrei essa função.

Bem... então indo ao que interessa:
Vejam esse formulário abaixo:



<form id="cadastro" method="post" action="cadastro.php">

    <label for="nome">Nome</label>

    <input type="text" name="nome" id="nome" />

    <br />



    <label for="email">E-mail</label>

    <input type="text" name="email" id="email" />

    <br />



    <label for="endereco">Endereço</label>

    <textarea name="endereco" id="endereco"></textarea>

    <br />

    Sexo



    <label for="m">Masculino</label>

    <input type="radio" name="sexo" id="m" value="m" />



    <label for="f">Feminino</label>

    <input type="radio" name="sexo" id="f" value="f" />



    <br />

    <label for="pacote">Pacote de viagem</label>

    <select name="pacote" id="pacote">

        <option value="1">Completo</option>

        <option value="2">Básico</option>

        <option value="3">Simples</option>

    </select>

    <br />

    <input type="submit" name="Submit" value="Enviar" />



</form>

Muito comum? O que vamos fazer aqui hoje é transformá-lo em um formulário AJAX sem precisar mexer muito nele. Na verdade iremos apenas acrescentar um função para este formulário. O primeiro passo é fazermos a chamada da função responsável por fazer a conversão, ela deva ser executada quando o formulário for submetido, portanto iremos acrescentar onsubmit="IPJAX_submit(this, returnFunctionDoCadastro);". IPJAX_submit é o nome que dei para a função. O primeiro parâmetro this passa o formulário como referência e a função returnFunction é o nome da função que irá tratar as alterações quando a requisição por AJAX for enviada. Portanto a tag form ficará assim:



<form id="cadastro" method="post" action="cadastro.php" onsubmit="IPJAX_submit(this, returnFunctionDoCadastro);">

Pronto... no formulário você não mexe mais! Quando você apertar o botão submit essa função irá percorrer o formulário, pegará os valores no formulário, irá preparar a string com os dados e fará a requisição. Você nem precisa se preocupar com o método (POST ou GET) nem com o action, pois ela irá tratar tudo. Vamos ver então o código dela:



function IPJAX_submit(formulario, returnFunction)

{	

    var metodo = formulario.method.toUpperCase();

    var action = formulario.action + "?";

    var Variaveis = "";

    var NomeTag;

    var TipoInput;

    for (var i=0;i<formulario.length;i++)

    {

        NomeTag = formulario.elements.tagName.toUpperCase();

        TipoInput = formulario.elements.type.toUpperCase();



        if(NomeTag == "INPUT" || NomeTag == "SELECT" || NomeTag == "TEXTAREA")

        {

            if(TipoInput == "FILE")

                alert('ERRO: Não é possível enviar arquivos por AJAX');

            if(TipoInput  == "RADIO" || TipoInput == "CHECKBOX" )

            {

                if(formulario.elements.checked)	Variaveis += formulario.elements.name + "=" + escape(formulario.elements.value) + "&";

            }		

            else	

                Variaveis += formulario.elements.name + "=" + escape(formulario.elements.value) + "&";

        }

    }

    if(metodo == "GET")

    {

        action += Variaveis;

        Variaveis = null;

    }

    var ajax = openAjax();

    ajax.open(metodo, action, true); 		

    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    eval('ajax.onreadystatechange = ' + returnFunction + ';');

    ajax.send(Variaveis);

    return false;

}

Eu não vou escrever muito detalhadamente aqui, senão ficaria muito longo. Qualquer dúvida, fiquem a vontade para comentar que eu explicarei mais detalhadamente.
Acredito que a parte mais importante nessa função seja todo o for. O que faço ali é procurar por todos os elementos de um formulário. Caso ele seja um input, textarea ou select, ele terá informações para serem enviadas. No entanto temos que testar se os inputs não são do tipo file, pois o AJAX não poderia enviar tal conteúdo. Outra coisa que precisamos ficar a tentos é se o input é do tipo radio. Se for, temos que pegar somente o valor do input que está marcado, pois como sabemos, os grupos de radios possuem o mesmo nome. E, enfim, se o input é do tipo checkbox, isto por que nós só pegaremos o seu valor se ele estiver marcado.

Depois é só organizar esses valores em uma string, e enviá-las para o endereço de action pelo método do formulário!
Agora você deve estar com três dúvidas na cabeça: Onde irá aparecer o resultado da requisição? Para que diabos serviu o segundo parâmetro? E, Por que a função retorna false?
Vamos responder então:

1. O resultado ainda não está sendo tratado. Essa função somente envia nosso formulário. Como eu mostrei no primeiro artigo, o AJAX possui estados da requisição. Quando essa função executa, o objeto AJAX irá executar a função returnFunction() a cada vez que o estado mudar. (em caso de dúvida leia o primeiro artigo).
É por isso que existe a linha:
eval('ajax.onreadystatechange = ' + returnFunction + ';');

2.O segundo parâmetro serviu para informar qual o função irá executar a cada vez que o estado da requisição mudar. Você pode ter milhares de formulários, mas cada um terá um comportamento. Nesse caso o nome da nossa função foi returnFunctionDoCadastro, portanto vamos criar essa função:
function returnFunctionDoCadastro() { var resultado; if(ajax.readyState == 1) document.getElementById('loading').innerHTML = 'Verificando dados...'; if(ajax.readyState == 4) { if(ajax.status == 200) { resultado = unescape(ajax.responseText); if(resultado == "sucesso") location= 'outraPagina.php'; if(resultado == "emailCadastrado") alert('Esse email já está cadastrado!); if(resultado == "semVagas") alert('Desulpe, as vagas acabaram!); } else document.getElementById('loading').innerHTML = "Erro: " + ajax.status; } return false; }

Nesse caso a cima, o meu script está preparado para retornar um parâmetro que indica o que fazer. (sucesso, emailCadastrado ou semVagas). Mas você poderia fazer, por exemplo, que o script retornasse todo o formulário novamente com mensagens de alerta para os campos com erro. Ou que substituísse o formulário pela tela de agradecimento pelo cadastro. O que importa é que essa função irá tratar o dado de resposta... E é nela que você recepciona o valor enviado.

3. Por último, e não menos importante, a resposta do terceiro questionamento: Por que a função IPJAX_submit retorna false?. Isso é muito importante! As duas funções utilizadas aqui precisam retornar false! Para que o formulário não seja enviado normalmente e a página recarregada.

Esse artigo foi mais complexo e já exige que você tenha um conhecimento melhor de AJAX, mas não se assuste, se não der certo entre em contato.

compartilhe

Links patrocinados

Últimos artigos do editor

ASP.NET e web standards
Essa matéria não pretende mo.

Use os validadores do ASP.
Além de facilitar a vida do .

UPLOAD com AJAX é possíve.
Não considere isso um artigo.

Começando do simples
Este é o meu primeiro artigo.

> clique aqui para comentar
Opinião do leitor:

6 Comentário(s)

Ricardo comentou:

Como exibir as mensagens de erro na própria página do formulário para que o usuário possa corrigir e enviar novamente?

Publicado em: 22/08/2008 - 11:13

Fddfgfd comentou:

dsfgsdf

Publicado em: 28/04/2008 - 21:16

Danilo comentou:

Consegui depois de dois acertos: - onde tem elements. colocar elements[i]. - no onsubmit do form colocar = return IPJAX_submit. Só consegui assim!

Publicado em: 03/09/2007 - 11:51

Danilo comentou:

Olá. Muito boa sua coluna. Quanto ao código acima tiver problema com type image. Ainda estou tentando resolver, mas se tiver alguma posição sobre isso agradeço. Parabéns!

Publicado em: 03/09/2007 - 10:49

comentou:

Muito interessante sua coluna. Já tinha uma breve experiência com AJAX, e estava procurando alguns modelos... Esse Framework, foi você que fez.

Publicado em: 05/01/2007 - 12:39

comentou:

Muito boa sua coluna Rubens, estava precisando de um ajax bom.

Publicado em: 02/12/2006 - 22:34

Acesso restrito

Destaques

ÍCONES BR
A maior coletânea de ícones do Brasil. Faça suas buscas de ícones, e encontre em forma de filtro.

Cadastre-se
Com o cadastro você recebe as novidades da semana e pode participar das promoções do portal.

Assine nosso RSS
Assine nossos RSS e recebe as novidades do site em seu leitor.

Autor

Rubens de Souza Silva

Artigos Relacionados

Resolvendo o problema do Cache
Exibindo Hints com AJAX
Preenchendo uma ComboBox Ajax e .
Trabalhando com JSON

Novos Artigos

Curso de Visual Basic - Aula 3 -.
Instalando e executando o MSN no.
FDIS ISO 9001:2008 já está dispo.
Sistema de Login com Jquery

Notícias Relacionados

Plataforma OpenSocial tem evento.