Carregar envio de form com Jquery

mv.silvapereira · Janeiro 14, 2013

Estou tentando fazer com que um form seja enviado sem carregar a pagina.. apenas com jQuery

Mas não está dando certo. Este é código q consegui até agora

//Formulário
<form id="footerForm" method="post" enctype="multipart/form-data">
          <div class="contactForm">
            <img class="loadingImage" src="loader.gif" alt="Carregando" title="Carregando"/>
            <input class="field" type="text" name="nome" placeholder="Nome" />
            <input class="field" type="text" name="email" placeholder="email" />
            <textarea class="message textInput" name="mensagem" rows="11" cols="25"></textarea>
            <input type="hidden" name="acao" value="enviar" />
            <input name="submit" type="submit" value="Enviar" class="button loader">
          </div>
</form>

O arquivo onde fica as funções Jquery fica em um arquivo separado

// Função para carregar com Jquery
	$(function() {
	$(".loadingImage").hide();
	$("#footerForm").submit(function() {
		var nome = $("#nome").val();
		var email = $("#email").val();
		var mensagem = $("#mensagem").val();
		$.post('form_mail.php', {nome: nome, email: email, mensagem: mensagem }, function(resposta) {
			$(".loadingImage").slideDown();
			if (resposta != false) {
				$("#status").html(resposta);
			} 
			else {
				$("#status").html("Mensagem enviada com sucesso!");
				$("#nome").val("");
				$("#email").val("");
				$("#mensagem").val("");
			}
		});
	});
	});

<?php
// codigo que envia a msg

      $nome     = strip_tags(trim($_POST['nome']));
      $email    = strip_tags(trim($_POST['email']));
      $mensagem = strip_tags(trim($_POST['mensagem']));
      
      if(empty($nome)){
      $msg = 'O Nome é Obrigatório';
      }elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
      $msg = 'Digite um E-mail válido';
      }elseif(empty($mensagem)){
      $msg = 'A Mensagem é Obrigatória';
      }else{
		require('class.phpmailer.php');
       
       $mail = new PHPMailer();
       $mail->IsSMTP();
       $mail->SMTPAuth = true;
       $mail->Port = 25;
       $mail->Host = '...';
       $mail->Username = '..';
       $mail->Password = '..';   
       $mail->SetFrom('..', '..');
       $mail->AddAddress('...', '..');
       $mail->Subject = 'Formulário de Contato';
       $body = "<strong>Nome :</strong>{$nome} <br />
       		<strong>E-mail :</strong>{$email} <br />
       		<strong>Mensagem :</strong>{$mensagem}";
       
       $mail->MsgHTML($body);
       
       if($mail->Send())
           $msg = 'Sua Mensagem foi enviada com Sucesso!!!';
        else
           $msg = 'Sua Mensagem não foi enviada, tente novamente';
       
      }     
?>

fernandotholl · Janeiro 14, 2013

Ao enviar o post, você não quer recarregar a página correto? Então o evento submit precisa ser anulado, e depois executar o Ajax.

Para isso usamos a função do JavaScript preventDefault();

Veja como utilizar:

$("#footerForm").submit(function(event) {
    event.preventDefault();

    # Resto do seu código
    ...

:!: Não esqueça do parâmetro na função anônima "event".

Viu? Bem simples!

Você não conseguia porque antes de qualquer coisa ele fazia o post normalmente, sem executar nada de JavaScript

mv.silvapereira · Janeiro 14, 2013

Agora pelo menos já desparou a função o problema agora é pq a imagem .gif de carregando não some..

Qual seria esse parâmetro na função anômina "event"?? não entedi isso..

fernandotholl · Janeiro 14, 2013

Agora pelo menos já desparou a função o problema agora é pq a imagem .gif de carregando não some..

Qual seria esse parâmetro na função anômina "event"?? não entedi isso..

"event" é o parâmetro, que no caso é um objeto do Javascript, função anônima seria function(){...}

Eu copiei seu código e aqui na minha máquina a imagem some.

Coloca um link com o código funcionando para pode testar.

mv.silvapereira · Janeiro 15, 2013

Então.. eu tava enfrentando alguns problema mas foi por vacilo meu mesmo kkkkkkk.. a mensagem não estava sendo enviada pq no formulário eu esqueci de colocar os ids nos inputs então o jquery não estava passando os valores.. e a imagem de carregando não estava sendo ocultada pq eu estava passando a mensagem de enviado em outra div.. fiz algumas alterações e o código ficou assim

$(".loadingImage").hide();
	$("#footerForm").submit(function() {
		event.preventDefault();
		
		var nome = $("#nome").val();
		var email = $("#email").val();
		var mensagem = $("#mensagem").val();
		$.post('form_mail.php', {nome: nome, email: email, mensagem: mensagem }, function(resposta) {
			$(".loadingImage").slideDown();
			if (resposta != false) {
				$(".loadingImage").slideUp();
			} 
			else {
				$(".loadingImage").slideUp();
				$("#nome").val("");
				$("#email").val("");
				$("#mensagem").val("");
			}
		});
	});
	});

Agora me surgiu outras duvidas..

Primeiro se vc observar no código php de envio toda validação e a mensagem de confirmação de envio está nele.. como faço para passar esses valores que é recebido na variável $msg pro js?? Pq da forma q está ele não esta fazendo validação nenhum se enviar a mensagem sem campo nenhum.. ele ainda sim aceita..

Outra duvida é q no caso eu passo os valores pelo metodo post.. tanto pro js quanto pro php..

O js esta pegando o valor pelo atributo "id".. como eu faria se quisesse q ele pegasse pelo atributo "name" igual eu faço no php??

fernandotholl · Janeiro 15, 2013

Primeiro se você observar no código php de envio toda validação e a mensagem de confirmação de envio está nele.. como faço para passar esses valores que é recebido na variável $msg pro js?? Pq da forma q está ele não esta fazendo validação nenhum se enviar a mensagem sem campo nenhum.. ele ainda sim aceita..

js esta pegando o valor pelo atributo "id".. como eu faria se quisesse q ele pegasse pelo atributo "name" igual eu faço no php??

Vou aproveitar e responder seus dois questionamentos ao mesmo tempo:

O Correto é você validar os dados tanto no servidor (PHP) quando no cliente (Javascript).

No servidor você já está fazendo isso, e precisa também adicionar no Javascript.

O JavaScript deve apenas evitar que a informação chegue indevidamente no servidor, ou seja, é uma forma de validar os dados, mais que não é 100% eficaz pois o usuário pode muito bem desabilitar o JavaScript do navegador. Por isso a necessidade de validar no PHP também.

No Java Script você já tem os campos, então é fácil validar, veja:

Respondendo sua 2° pergunta: Basta você trocar o seletor, veja:

/* ... */
var nome = $("input[name='nome']").val(); /* Troca o #id por [name=nome] */
var email = $("input[name='email']").val();
var mensagem = $("textarea[name='mensagem']").val();

if(nome == "" OR nome == undefined){
    alert('Nome em branco');
    return false; /* Cancela a execução */
}

/* E assim sucessivamente ... */

É isso, qualquer dúvida, posta ae!

mv.silvapereira · Janeiro 15, 2013

Só tenho mais uma duvida.. blz.. a validação dos campos sendo feita pelo javascript resolve em parte meu ultimo problema..

O que falta é soh a confirmação de envio.. como vc pode perceber é o php que confirma esse envio e não sei como mostrar a mensagem confimando ou não o envio..

tentei da seguinte forma mas ainda sim não foi...

<?php if(isset($msg))
  	echo "<small class=\"errortext\">$msg</small>";
?>

fernandotholl · Janeiro 15, 2013

Uhm, entendi!

Bom, primeiro da forma como está sendo feita a validação, se o envio conter mais de um erro (Ex. Nome em branco e e-mail inválido), ele vai mostrar apenas o último encontrado, pois você está subscrevendo o valor da variável $msg.

Para contornar esse problema e mostrar todos os erros/retornos do formulário, eu adaptei seu script armazenando essas "mensagens" em um array. Não é a melhor solução, digo isso pois existem métodos mais eficazes para validação de formulários, mais dessa forma fica simples de compreender e incorporar ao que você precisa.

Outra coisa importante, você não mencionou, mais a mensagem pode ser exibida no arquivo que dispara o e-mail? Correto? Se sim basta deixar seu código assim:

<?php

/* Requires */
require('class.phpmailer.php');

/* Campos */
$nome     = (isset($_POST['nome']) AND !empty($_POST['nome'])) ? strip_tags(trim($_POST['nome'])) : null;
$email    = (isset($_POST['nome']) AND !empty($_POST['email'])) ? strip_tags(trim($_POST['email'])) : null;
$mensagem = (isset($_POST['mensagem']) AND !empty($_POST['mensagem'])) ? strip_tags(trim($_POST['mensagem'])) : null;

/* Aqui armazena o retorno */
$retorno  = array();

/* Validações */
if($nome == null){
    $retorno[] = 'O Nome é Obrigatório';
}elseif($email == null OR !filter_var($email, FILTER_VALIDATE_EMAIL)){
    $retorno[] = 'Digite um E-mail válido';
}elseif($mensagem == null){
    $retorno[] = 'A Mensagem é Obrigatória';
}

/* Envio de e-mail */
if(empty($retorno)){
   
    $mail = new PHPMailer();
    $mail->IsSMTP();
    $mail->SMTPAuth = true;
    $mail->Port = 25;
    $mail->Host = '...';
    $mail->Username = '..';
    $mail->Password = '..';   
    $mail->SetFrom('..', '..');
    $mail->AddAddress('...', '..');
    $mail->Subject = 'Formulário de Contato';
    $body = "<strong>Nome :</strong>{$nome} <br />
		<strong>E-mail :</strong>{$email} <br />
		<strong>Mensagem :</strong>{$mensagem}";
   
    $mail->MsgHTML($body);
   
    if($mail->Send())
        $retorno[] = 'Sua Mensagem foi enviada com Sucesso!!!';
    else
        $retorno[] = 'Sua Mensagem não foi enviada, tente novamente';
}

/* Se for imprimir na mesma página, OK é só fazer assim */
if(isset($retorno) and !empty($retorno)){
    foreach ($retorno as $key => $valor) {
        echo $valor."<br />";
    }
}

?>

Agora caso você queira validar o retorno em outro arquivo, você precisa de alguma enviar a mensagem para esse outro arquivo, ai nesse caso meu script não funcionaria direito, pois a forma mais simples de enviar essa informação a outro arquivo seria por GET, e temos um array com as mensagens.

Seria preciso analisar outra solução caso esse fosse o caso.

Espero ter ajudado.

mv.silvapereira · Janeiro 16, 2013

Gostei muita da idéia do Array.. não tinha pensado nisso kkkkkk.. mas como vc mesmo disse acho q essa não seria a solução ideal para mim.. pq eu tenho 3 arquivos.. um fica o form.. o outro fica o js e o outro fica o php que faz o envio do e-mail.. no caso teria q passar o valor da variavel $msg que esta no arquivo php para o arquivo onde fica o form.. aii tah o mistério kkkkkk.. antes eu conseguia numa boa.. soh com o codigo q postei acima.. mas depois que inclui o jquery ele não resgata mais o valor da $msg..

Mesmo assim muito obrigado pela ajuda até aqui... me tirou MUITASSSSSSSSSSS DUVIDAS.. =D

fernandotholl · Janeiro 16, 2013

Então como falei, você envia a mensagem por GET.

No final do arquivo que envia o e-mail coloca:

header('location: arquivoForm.php?msg=".url_encode("Aqui a mensagem"));

E no arquivo do form receba a variável assim;

$msg = (isset($_GET['msg'])) ? $_GET['msg'] : null;

if($msg != null){
    echo $msg;
}

Só que como lhe falei, meu código acima não funcionaria, teria que melhorá-lo.

Arquivado

Carregar envio de form com Jquery

Recommended Posts

mv.silvapereira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

fernandotholl 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

mv.silvapereira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

fernandotholl 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

mv.silvapereira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

fernandotholl 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

mv.silvapereira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

fernandotholl 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

mv.silvapereira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

fernandotholl 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante