Envio de formulário com jQuery

Para quem ainda não trabalhou com envio de formulários através do jQuery, ensinarei nesse artigo uma das maneiras para que isso seja feito.

Utilizarei uma função nativa do próprio jQuery para essa finalidade a jQuery.post

Basicamente essa função recebe 4 parametros:
jQuery.post( url [, data ] [, success ] [, dataType ] )

1 - url: o endereço para o qual desejamos enviar os dados do formulário. Normalmente esse é o endereço de um script PHP que tratará os dados enviados e salvará no banco de dados ou enviará os dados por email.

2 - data: esses são os dados que serão enviados no POST, que são os nomes e valores dos campos do seu formulário.

3 - success: essa é uma função de retorno que mostrará uma mensagem de "dados enviados". Quando você envia os dados para o URL com o script PHP, você pode configurar esse URL para retornar uma mensagem de sucesso ou qualquer outra mensagem que deseja apresentar para o visitante que preencheu o formulário.

4 - dataType: é o tipo de dados que será retornado para a função em success. Os principais são: json e html.

OBS: antes de prosseguir não esqueça de incluir o jquery no cabeçalho ou rodapé do seu documento HTML, aqui não trataremos dessa inclusão.

Após explicações vamos aos passos e códigos necessários para o envio do formulário em HTML através do Jquery. Vamos usar nesse exemplo um formulário HTML o mais simples possível, com apenas um campo INPUT.

Código HTML:


<form method="post" id="form-exemplo">
            <input type="text" name="nome" value="">
            <button type="submit">Enviar</button>
        </form>

Para pegar os dados do formulário HTML utilizaremos o script Jquery logo abaixo.

Código jQuery:


<script type="text/javascript">
            jQuery(function($){                
                $('#form-exemplo').submit(function(){                    
                    $.post('envia-email.php', $('#form-exemplo input'), function(retorno){                        
                        alert(retorno);
                    }, 'html');
                    
                    return false;
                });
            });
        </script>

E para o URL de recebimento dos dados utilizaremos o script PHP logo abaixo. Nesse exemplo o script vai apenas receber e retornar o valor do campo que foi enviado, mas nesse script PHP poderá programar para enviar os dados por email ou salvar no banco de dados.

Código PHP (envia-email.php):


<?php
if(isset($_POST['nome'])) {
    echo $_POST['nome'];
} else {
    echo '';
}
exit;

Então é esse um dos procedimentos para trabalhar com formulários utilizando o jQuery. Nesse exemplo foi utilizado um formulário básico para evitar uma quantidade maior de linhas de código, que dificultaria o entendimento do processo de envio e retorno.


Comentar