Limpar formulário após submit não funciona.

Front-end

20/06/2016

Boa tarde, tinha meu site em um host grátis, para testar, dai comprei um host no hostgator, coloquei meu site la, mas agora apos dar submit no formulário, ele não esta mais limpando os campos, nem mostrando a resposta se foi enviado com sucesso ou não. Acredito que esteja tudo certo com meu código, mas podem dar uma olhada pra mim por favor.

<?php
header('Content-type: text/html; charset=UTF-8');
   
if (isset($_POST)):
 
 	$para 	  = "contato@volcanodigital.com.br";
    $assunto  = "Contato pelo Site";
    $nome     = (isset($_POST['nome']))? $_POST['nome']: '';
    $email    = (isset($_POST['email']))? $_POST['email']: '';
    $telefone = (isset($_POST['telefone']))? $_POST['telefone']: '';
    $msg      = (isset($_POST['mensagem']))? $_POST['mensagem']: '';
 
    // Valida se foram preenchidos todos os campos
    if (empty($nome) || empty($email) || empty($telefone) || empty($msg)):
        $array  = array('tipo' => 'alert alert-danger', 'mensagem' => 'Preencher todo os campos obrigatórios(*)!');
        echo json_encode($array);
    else:
 
        // Monta a mensagem do email
		
		$mensagem = "<strong> Mensagem de Contato </strong><br><br>\n";
	    $mensagem .= "<br><strong>Nome:  </strong>".$nome."\n";
	    $mensagem .= "<br><strong>Email:  </strong>".$email."\n";
	    $mensagem .= "<br><strong>Tel:  </strong>".$telefone."\n";
	    $mensagem .= "<br><strong>Mensagem: </strong>".$msg."\n";
        
        // Envia o e-mail e captura o retorno
        $retorno = EnviaEmail($para, $assunto, $mensagem);
 
        // Conforme o retorno da função exibe a mensagem para o usuário
        if ($retorno):
            $array  = array('tipo' => 'alert alert-success', 'mensagem' => 'Sua mensagem foi enviada com sucesso!');
            echo json_encode($array);
        else:
            $array  = array('tipo' => 'alert alert-danger', 'mensagem' => 'Infelizmente houve um erro ao enviar sua mensagem!');
            echo json_encode($array);
        endif;
 
    endif;
endif;
 
// Função para envio de e-mail usando a função nativa do PHP mail()
function EnviaEmail($para, $assunto, $mensagem){

	  $headers = "Content-Type:text/html; charset=UTF-8/n";
	  $headers .= "From: $email Reply-to: $email/n";
	  $headers .= "MIME-Version: 1.0\n";
      $headers .= "X-Priority: 3\n";
	
	$retorno = mail($para, $assunto, $mensagem, $headers);
    return $retorno;
}


<script>
        $(document).ready(function () {
 
            $('#contato').submit(function() {
                var dados = $('#contato').serialize();
 
                $.ajax({
                    type : 'POST',
                    url  : 'envia_email.php',
                    data : dados,
                    dataType: 'json',
                    success :  function(response){
						$('#contato')[0].reset();
                        $('#resultado').css('display', 'block')
                            .removeClass()
                            .addClass(response.tipo)
                            .html('')
                            .html('<p>' + response.mensagem + '</p>');
                    }
                });
 
                return false;
            });
        });
    </script>

<form id="contato" method="post" action="envia_email.php">
                        <ul>
                            <li class="first">
                                <a id="icone_nome" class="icones_contato"></a>
                                <input type="text" name="nome" class="text" placeholder="Nome" required>
                                <div class="clear"></div>
                            </li>
                            <li class="first">
                                <a id="icone_email" class="icones_contato"></a>
                                <input type="email" name="email" class="text" placeholder="email@example.com" required>
                                <div class="clear"></div>
                            </li>
                            <li class="first">
                                <a id="icone_telefone" class="icones_contato"></a>
                                <input type="tel" name="telefone" class="text" placeholder="45 1234-5678" required pattern="^\d\d\d$">
                                <div class="clear"></div>
                            </li>
                            <li class="second">
                                <a id="icone_mensagem" class="icones_contato"></a>
                                <textarea placeholder="Mensagem" name="mensagem" id="caixa_mensagem" required></textarea>
                                <div class="clear"></div>
                            </li>
                        </ul>
                            <input type="submit" value="Enviar" id="botao_enviar">
                        	<div class="clear"></div>
                            
                            <div id="resultado">
                			</div>
            	</form>
Dalton Fuentes

Dalton Fuentes

Curtidas 0

Melhor post

William

William

23/06/2016

Dalton essa sua validação do telefone em HTML5 está matando os usuário de raiva rsrsrs ... tive que editar HTML no navegador e tirar ela para poder testar.

Veja na imagem do inspecionar elemento testando no Hostgator a quantidade Warnings:
http://pt-br.tinypic.com/r/311xrtw/9

Coloque essa linha no topo do seu script PHP que envia o e-mail:
date_default_timezone_set("Brazil/East");
GOSTEI 1

Mais Respostas

Carlos Ramos

Carlos Ramos

20/06/2016

Tem erro na linha 46 e ainda acho que para este efeito será preciso de um jquery para ajudar.
GOSTEI 0
William

William

20/06/2016

Inspecione seu código no Navegador, 99% desses problemas estão no script PHP onde sempre que ocorre um erro não envia a resposta para a função callback 'success'!

http://www.devwilliam.com.br/jquery/aprenda-como-debugar-ajax-sem-plugin
GOSTEI 0
Dalton Fuentes

Dalton Fuentes

20/06/2016

William, me aparece essa mensagem:


Warning: Cannot modify header information - headers already sent by (output started at /home/volca246/public_html/envia_email.php:1) in /home/volca246/public_html/envia_email.php on line 2
{"tipo":"alert alert-success","mensagem":"Sua mensagem foi enviada com sucesso!"}

Desculpe-me, mas não sei muito de PHP suficiente ainda pra solucionar isso sozinho! Pode me ajudar por favor ?
GOSTEI 0
William

William

20/06/2016

Seu problema aparente ser com codificação do script PHP, veja nesse link como corrigir:
http://rubsphp.blogspot.com.br/2011/07/problemas-com-charset-nunca-mais.html
GOSTEI 0
Dalton Fuentes

Dalton Fuentes

20/06/2016

William, é o seguinte. Antes quando eu estava montando o site, quando você me ajudou no meu outro post, sobre enviar formulário e tudo mais, eu estava usando um servidor gratuito da HOSTINGER, e agora estou usando um pago da HOSTGATOR.
Fiz um teste agora, peguei de novo um servidor grátis da HOSTINGER, e coloquei o mesmo site igualzinho que esta no HOSTGATOR. Enviei um e-mail pelo servidor grátis e deu tudo certo, apareceu o aviso de mensagem enviada com sucesso e o formulário foi resetado, tanto que apareceu essa mensagem agora :

{tipo: "alert alert-success", mensagem: "Sua mensagem foi enviada com sucesso!"}
mensagem
:
"Sua mensagem foi enviada com sucesso!"
tipo
:
"alert alert-success"

Dai fui enviar pelo site que esta hospedado no HOSTGATOR, e de novo da o mesmo erro e não faz essas duas funções ! Ele envia o e-mail certinho, só não reseta e nem mostra o aviso de mensagem enviada.

Não sei se tem algo a ver, mas dentro da minha pasta public_html, onde eu coloco o site, tem um arquivo chamado (error_log) que sempre fica la.

Não sei mais oque pode ser. Fiz tudo que seu ultimo link dizia!
GOSTEI 0
Dalton Fuentes

Dalton Fuentes

20/06/2016

William, entrei em contato com o suporte do HOSTGATOR, e me disseram isso:

- dalton, seu formulário o botão enviar não esta funcionando...
- vc clica e ele não redireciona
- o botão não tem função ali
- tens que ver na tua programação
- pq ele não esta ativo

Este é meu form: 

<form id="contato" method="post" action="envia_email.php">
                        <ul>
                            <li class="first">
                                <a id="icone_nome" class="icones_contato"></a>
                                <input type="text" name="nome" class="text" placeholder="Nome" required>
                                <div class="clear"></div>
                            </li>
                            <li class="first">
                                <a id="icone_email" class="icones_contato"></a>
                                <input type="email" name="email" class="text" placeholder="email@example.com" required>
                                <div class="clear"></div>
                            </li>
                            <li class="first">
                                <a id="icone_telefone" class="icones_contato"></a>
                                <input type="tel" name="telefone" class="text" placeholder="45 1234-5678" required pattern="^\d\d\d$">
                                <div class="clear"></div>
                            </li>
                            <li class="second">
                                <a id="icone_mensagem" class="icones_contato"></a>
                                <textarea placeholder="Mensagem" name="mensagem" id="caixa_mensagem" required></textarea>
                                <div class="clear"></div>
                            </li>
                        </ul>
                            <input type="submit" value="Enviar" name="enviar" id="botao_enviar">
                        	<div class="clear"></div>
                            
                            
            	</form>
                <div id="resultado">
                </div>
GOSTEI 0
William

William

20/06/2016

Sendo assim é problema com jQuery, você está requisitando o arquivo na página?
GOSTEI 0
Dalton Fuentes

Dalton Fuentes

20/06/2016

Sim, da uma olhada:

<head>
    <meta charset="utf-8">
    <title>Teste</title>
	
	<meta name="google-site-verification" content="1FWAcGm7Fa5u-yQJn6PHAYRxaUVi0HcqIDpLWeqsq8g" />
	<link rel="shortcut icon" href="_imagens/favicon.png" type="image/x-icon">
	<link rel="icon" href="_imagens/favicon.png" type="image/x-icon">
  
	<link rel="stylesheet" href="_css/index.css"> 
    <link rel="stylesheet" type="text/css" href="_css/formulario_contato.css">
    <script type="text/jscript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/jscript"  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<script type="text/javascript" src="_js/script.js"></script>
    
	<script>
        $(document).ready(function () {
 
            $('#contato').submit(function() {
                var dados = $('#contato').serialize();
 
                $.ajax({
                    type : 'POST',
                    url  : 'envia_email.php',
                    data : dados,
                    dataType: 'json',
                    success :  function(response){
						$("#contato")[0].reset();
                        $('#resultado').css('display', 'block')
                            .removeClass()
                            .addClass(response.tipo)
                            .html('')
                            .html('<p>' + response.mensagem + '</p>');
                    }
                });
 
                return false;
            });
        });
    </script>
    
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900,100" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600" rel="stylesheet" type="text/css">
    <style type="text/css">
    </style>

<script type="text/javascript">
    $(document).ready(function() {
    function filterPath(string) {
    return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
    }
    $('a[href*=#]').each(function() {
    if ( filterPath(location.pathname) == filterPath(this.pathname)
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
    var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
    var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
    if ($target) {
    var targetOffset = $target.offset().top - 85;
    $(this).click(function() {
    $('html, body').animate({scrollTop: targetOffset}, 1000);
    return false;
    });
    }
    }
    });
    });
    // ]]></script>
</head>


Ta assim e ainda n vai !
Mas William, eu n intendo o pq no host gratis ele funciona, e no HostGator não.
GOSTEI 0
William

William

20/06/2016

Cara que confusão é essa, tem 3 versões do jQuery sendo carregada?
GOSTEI 0
Dalton Fuentes

Dalton Fuentes

20/06/2016

Eita, tava testando uma por uma, pq uma amigo disse que tinha umas versões que estavam com uns bugs, estou só com a primeira:

<script type="text/jscript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Deve ter escapado nos Ctrl+c Ctrl+v que estava dando quando trocava elas, mas enfim, esta com uma só e nao funciona !
GOSTEI 0
William

William

20/06/2016

Tem alguma url para eu testar esse formulário?
GOSTEI 0
Dalton Fuentes

Dalton Fuentes

20/06/2016

HOSTGATOR: http://teste.volcanodigital.com.br/

HOSTINGER: http://volcanodigital.esy.es/
GOSTEI 0
Dalton Fuentes

Dalton Fuentes

20/06/2016

Ja mudei William

[url]http://pt-br.tinypic.com/r/2unze5h/9[/url]

Da uma olhada porfavor.
GOSTEI 0
William

William

20/06/2016

Mesmo colocando esse código no topo do script PHP que envia o e-mail, contínua o problema no hostgator?
date_default_timezone_set("Brazil/East");
GOSTEI 0
Dalton Fuentes

Dalton Fuentes

20/06/2016

Sim, continua !


Warning: Cannot modify header information - headers already sent by (output started at /home/volca246/public_html/teste/envia_email.php:1) in /home/volca246/public_html/teste/envia_email.php on line 4
{"tipo":"alert alert-success","mensagem":"Sua mensagem foi enviada com sucesso!"}
GOSTEI 0
Dalton Fuentes

Dalton Fuentes

20/06/2016

Oi William, consegui solucionar. Fiz novamente o PHP que enviar o e-mail de acordo com este link seu

[url]http://www.devwilliam.com.br/php/formulario-de-contato-com-ajax-php-mysql[/url]

Coloquei o 
date_default_timezone_set("Brazil/East");

Arrumei isso:
Espaços em branco antes da <?php ou depois da ?>
UTF-8 Byte Order Mark (BOM)
e deu certo. Provavelmente era alguma coisa pequena que estava atrapalhando depois de tudo que fizemos.
Obrigado novamente pela atenção William!
GOSTEI 0
POSTAR