Função para enviar qualquer formulário html

Bom dia pessoal, hoje eu estava pensando, como sou webdesigner e sempre preciso criar vários sites, tem projetos que sempre tem um formulário diferente, como é chato você criar aquele esquema para todos os formulários do site, claro se seu site só tem aquele formulário de envio de email simples, mas se tem vários tipos de formulário com campos diferentes, você pode utilizar a função serialize do jquery, a qual já pega todos os dados do seu formulário e monta uma string, esta string é recebida pelo php ou outra linguagem do servidor que esteja a utilizar.

Daí você pergunta: e a validação do lado cliente não vai ficar mais complicada?

Bom faz muito tempo que não precisamos fazer a validação do lado cliente, você pode perceber como é rápida a resposta do servidor, a não ser que seu site seja muito acessado, porém, não fica dificil não, você pode fazer a validação tranquilamente do lado cliente, se for o caso eu posso até fazer um outro tutorial ensinando como fazer esta validação, mas hoje o foco é esta função para enviar todo e qualquer tipo de formulário html.

Para começar nossa função precisamos recuperar os dados do nosso formulário, suponha que o mesmo tenha o id form

//setamos a variavel como o formulario

var form = $("#form");

//recuperamos atributo url

var url = form.attr("action");

//finalmente recuperamos todos os dados do formulario

var formdata = form.serialize();

Perceba que até agora só o que fizemos foi pegar todos os dados do formulário, após isso a variavel formdata será mais ou menos assim:

campo1=valor1&campo2=valor2 ...

Assim vai até pegar todos os campos do formulário
Bom agora só o que falta é enviar estes dados para uma url, esta url será a mesma do formulario no atributo action.

$.ajax({ 

type: "POST", 

url: url, 

data: formdata, 

success: function(resposta){ 

$("p.retorno").show(); 

$("p.retorno").text(resposta); 

} 

});

Já deu pra perceber não é? este código funciona para qualquer formulário, e sempre que você fizer uma alteração tipo colocar mais um campo ou excluir outro campo, pelo menos no jquery não precisa alterar nada.
você vai precisar de um campo tipo um paragrafo com a class retorno e ocultar ele com css e/ou com jquery para que o mesmo só apareça com a mensagem após receber a resposta do servidor.


vou deixar o código completo abaixo

JQUERY

$("#Enviar").click(function () {

var form = $("#form");

var url = form.attr("action");

var formdata = form.serialize();

$.ajax({ 

type: "POST", 

url: url, 

data: formdata, 

success: function(resposta){ 

$("p.retorno").show(); 

$("p.retorno").text(resposta); 

} 

});

});

});

HTML

<form name="form" id="form" method="post" action="functions/gravar.php">

<h1 class="titulo"> Recomendados </h1>

<p> <span> Nome </span> <input type="text" name="nome" id="nome"> </p>

<p> <span> email </span> <input type="email" name="email" id="email"> </p>

<p> <input type="button" name="Enviar" id="Enviar" value="Adicionar"> </p>

<p class="retorno"></p>

</form>

Quer mais praticidade? poderiamos ainda do lado servidor criar um mecanismo que recebesse todos os campos vindos do formulario sem a necessidade de fazer um a um desta forma:

$nome = $_POST['nome'];

$email = $_POS['email'];

Imagine que seu formulário tenha uns 30 campos para preenchimento! :o
Uau !!! é tão chato preencher formulários, mais chato ainda validar eles no servidor.
Bom vou criar muitos outros tutoriais ensinando a como tornar a vida do programador e do usuário mais fácil, e logo você terá um banco de códigos que vai poder utilizar para acelerar os seus projetos, eu espero poder ajudar de alguma forma.

Se você curtiu o blog e deseja um tutorial específico, manda aí a dica nos comentários.
como sempre, deixo o download do arquivo, desta vez apenas o código Jquery

                                envia_form.js