Formulários AJAX

Essa é uma maneira fácil para você converter qualquer formulário do seu site para enviar os dados por AJAX. Claro que você precisa lembrar que não é possível enviar arquivos por AJAX, mas os demais inputs podem ser utilizados normalmente. Essa função facilitou muito minha vida. Ela economiza muito nosso tempo, principalmente se você for converter algo que já existe para AJAX.

Por | @oficinadanet Programação
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:

    
    
    


    
    
    


    
    
    

    Sexo

    
    

    
    

    

    
    
    

    




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:



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     {
        NomeTag = formulario.elements[ i ].tagName.toUpperCase();
        TipoInput = formulario.elements[ i ].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[ i ].checked) Variaveis += formulario.elements[ i ].name + "=" + escape(formulario.elements[ i ].value) + "&";
            }
            else
                Variaveis += formulario.elements[ i ].name + "=" + escape(formulario.elements[ i ].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.

Mais sobre: ajax, formularios
Share Tweet
DESTAQUES
Mais compartilhados
Comentários