Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

joaowebdesigner

Envio de formulário com ajax

Recommended Posts

Olá,

 

Depois de muito tempo sem postar, volto ao fórum do imasters para pedir um auxílio de vcs. Seguinte: estou fazendo um site de uma página só (cada seção é uma âncora com scroll, aquele esquema que todo mundo já tá manjado) e a última seção é a de fale conosco. Como se trata de uma página só e em nenhum momento haverá refresh na página, eu quero manter esse padrão e fazer o envio do form (de contato e newsletter) por meio do ajax.

 

O que eu preciso exatamente: ao clicar no botão de envio, esse botão deve sumir e aparecer uma mensagem de loading, ex "enviando mensagem, aguarde..." e, assim que o envio for concluído, o formulário deve ficar com display none e aparecer a mensagem de ok do envio, um h2 por ex. Logicamente, após o envio, aquele loading do botão deve sumir também.

 

É muito complexo fazer isso? Sei que tem 2 funções, $.post e $.ajax mas não sei a diferença entre elas. Poderiam me dar um exemplo desse envio? Minha dúvida é só com o javascript mesmo, o php já tá pronto. A dúvida principal é fazer o efeito do loading no botão, encerrar esse loading e mostrar uma div no lugar do form com a mensagem de sucesso. Em caso de erro no envio, eu quero que o formulário continue aparecendo e mostrar só um box adicional notificando que houve erro.

 

quem puder dar um help agradeço!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Um Exemplo rápido de formulário com ajax:

    <div id="Formulario">
        <form name="Exemplo" method="post">
            <input name="Campo" id="Campo" type="text" placeholder="Campo :P" />
            <input type="submit" value="Enviar" />
        </form>
    </div>
    <div id="Retorno"></div>
$(function(){
	$("form").submit(function(event)
	{
		event.preventDefault(); //Cancela o refresh do submit
		var Campo_Value = $("input#Campo").val(); //Pega o valor da Input
		if(Campo_Value != "" && Campo_Value != null) //Verifica se o campo foi preenchido
		{
			$("div#Retorno").html("Enviando mensagem, Aguarde...");
			$.post("Pagina_do_Post.php", { Campo: Campo_Value }, function(retorno){ $("div#Retorno").html(retorno); $("div#Formulario").fadeOut("fast"); }).fail(function(){$("div#Formulario").fadeIn("fast"); $("div#Retorno").html("Desculpe ocorreu um erro ao enviar o formulário"); });//Faz a Postagem do formulário, coloca o retorno dele na div de retorno e esconde o formulário
			return 1;
		}
		else
		{
			$("div#Retorno").html("Você não Preencheu o Campo!");
			$("input#Campo").focus(); //Da focu na input se ela não for digitada
			return 1;
		}
	});
});

na Pagina_do_Post.php:

<?php
$Campo = $_POST['Campo'];
if(isset($Campo)):
	//Função de enviar o formulário
	echo 'Formulário enviado!';
endif;
?>

 

Exemplo simples de postagem, ele posta pega o retorno do post e poe em uma div e esconde o formulário se der erro ele volta o formulário e avisa que ocorreu um erro, enfim não testei mais acho que esteja tudo correto.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.