0

Sou iniciante em programação e estou com um pequeno problema aqui. Já dei uma boa pesquisada aqui no stackoverflow, tanto em português quanto em inglês, mas não consegui adpatar ou colocar uma solução em prática aqui. Peço desculpas se o código doer no olho de vocês, mas começo é começo, hehehe.

É o seguinte, tem um form que chama com action o código "contato.php" e quando clica para enviar, ele executa um função em javascript, uma simples validação que checa se os campos obrigatórios estão preenchidos com alguma coisa e depois o formulário é enviado para um e-mail. Tudo isso funciona muito bem, acontece que depois do envio, ele redireciona para a página "contato.php" e eu queria que ela não fizesse nada, somente ficasse na página onde aparece um texto dizendo que a mensagem foi enviada. As soluções que eu vi consistiam em colocar algo como:

header("url: contato.html?sent=true");

Mas se tento isso, acaba retornando este erro para mim:

Cannot modify header information - headers already sent by (output >started at /Applications/MAMP/htdocs/Contato_Colab/contato.php:1)

Outras soluções iam na utilização de AJAX, mas eram direcionadas para quem já sabia como funciona e eu não sei nada sobre, ainda. Aí fica a minha dúvida, tem como impedir esse redirecionamento sem utilizar AJAX? Ou vou ter que aprender emergencialmente?

Formulário

<form name="form_contato" action="contato.php"  onsubmit="return validateForm()" method="post">

  <input id="nome" name="nome" type="text"  placeholder="Nome Completo*" class="celulaContato" >
  <input name="telefone" type="text" placeholder="Telefone" class="celulaContatoESQ">
  <input name="email" type="text"  placeholder="E-mail*" class="celulaContato" >
  <input name="site" type="text"  placeholder="Website" class="celulaContatoESQ">
  <input name="empresa" type="text"  placeholder="Empresa" class="celulaContato">
  <input name="cargo" type="text"  placeholder="Cargo" class="celulaContatoESQ">
  <input name="assunto" type="message"  placeholder="Assunto*" class="celulaContatoASSUNTO" >
  <textarea name="mensagem" rows="4" placeholder="Sua mensagem*" >
</textarea>
<input  id="enviar" name="enviar" type="submit" value="Enviar">
<div id="check"><input name="newsletter" type="checkbox"> <p>Receber Newsletter</p></div>

contato.php

<?php
    $nome = $_POST["nome"] ;
    $telefone = $_POST["telefone"] ;
    $email = $_POST["email"] ;
    $site = $_POST["site"] ;
    $empresa = $_POST["empresa"] ;
    $cargo = $_POST["cargo"] ;
    $assunto = $_POST["assunto"] ;
    $mensagem = $_POST["mensagem"] ;
    $from = "Formulário de Contato - Site Colab";
    $to = "[email protected]";
    $subject = "blablabla";

    $body = "De = $nome\n E-mail: $email\n Website: $site\n Empresa: $empresa\n Cargo: $cargo\n Assunto: $assunto\n  Mensagem:\n $mensagem" ;

    if ($_POST['enviar']) {
    mail ($to, $subject, $body, $from);     
    }   

?> 

validate.form

var x = document.forms["form_contato"]["nome"].value;
    if (x == "") {
        document.getElementById("invalido_form").innerHTML = "O campo nome deve ser preenchido";
        return false
    }
        var x = document.forms["form_contato"]["email"].value;
    if (x == "") {
        document.getElementById("invalido_form").innerHTML = "O campo E-mail deve ser preenchido";
        return false;
    }
        var x = document.forms["form_contato"]["assunto"].value;
    if (x == "") {
        document.getElementById("invalido_form").innerHTML = "O campo Assunto deve ser preenchido";
        return false;
    }
        var x = document.forms["form_contato"]["mensagem"].value;
    if (x == "") {
        document.getElementById("invalido_form").innerHTML = "O campo Mensagem deve ser preenchido";
        return false;
         }

    else {
        document.getElementById("invalido_form").innerHTML = "Sua mensagem foi enviada!";
        return true;
    }
}
3
  • Aonde esta a requisição no seu javascript que você está fazendo ?
    – NoobSaibot
    Commented 17/08/2017 às 2:15
  • Eu tentei colocar este último para false, mas ai ele não envia o email. Desculpe, mas não entendi bem o que quis dizer com a requisição no meu javascript, o que tenho de javascript está dentro de <script> no html Commented 17/08/2017 às 2:18
  • Aprenda ajax urgentemente mano, é muito simples e muito eficaz, se quiser mostro um código em php que estou usando ajax
    – RickPariz
    Commented 17/08/2017 às 2:22

3 Respostas 3

2

Insira um iframe oculto na página:

<iframe style="display:none;" name="contato" src="contato.php"></iframe>

Adicione no <form> o atributo target="contato".

Assim, o formulário será enviado ao iframe oculto dentro da própria página.

8
  • Valeu, David! Funcionou liso! Commented 17/08/2017 às 2:34
  • 1
    Muito engenhosa essa solução. Eu particularmente iria para uma solução ajax (mas sem jquery, só JS vanilla), mas essa certamente é a solução que demanda menos esforço e a melhor para fazer rapidamente um site ficar pronto. Afinal, cliente final não liga para estética de código =] Commented 16/03/2018 às 4:25
  • 1
    @JeffersonQuesado Isso depende as vezes. Como o AP disse que não queria Ajax, o iframe seria a melhor solução.
    – Sam
    Commented 16/03/2018 às 4:28
  • 1
    Nem vi esse detalhe no texto, que ajax não era o foco. Muito bem reparado, se eu fosse responder eu levaria um negativo por não ter prestado atenção Commented 16/03/2018 às 4:30
  • Simples e eficaz, porém eu não deixaria o iframe oculto, mas sim numa pequena área no topo do formulário e visível, inicialmente com src="about:blank" para uma página em branco e fazendo o script escrever uma mensagem de sucesso ou falha, pois tudo pode acontecer na hora de salvar na base de dados.
    – Dudaskank
    Commented 16/03/2018 às 4:54
1

Adicione o jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Formulário

<form name="form_contato" method="post">

  <input id="nome" name="nome" type="text"  placeholder="Nome Completo*" class="celulaContato" >
  <input name="telefone" type="text" placeholder="Telefone" class="celulaContatoESQ">
  <input name="email" type="text"  placeholder="E-mail*" class="celulaContato" >
  <input name="site" type="text"  placeholder="Website" class="celulaContatoESQ">
  <input name="empresa" type="text"  placeholder="Empresa" class="celulaContato">
  <input name="cargo" type="text"  placeholder="Cargo" class="celulaContatoESQ">
  <input name="assunto" type="message"  placeholder="Assunto*" class="celulaContatoASSUNTO" >
  <textarea name="mensagem" rows="4" placeholder="Sua mensagem*" >
</textarea>
<input  id="enviar" name="enviar" type="submit" value="Enviar">
<div id="check"><input name="newsletter" type="checkbox"> <p>Receber Newsletter</p></div>

contato.php

$nome = $_POST["nome"] ;
$telefone = $_POST["telefone"] ;
$email = $_POST["email"] ;
$site = $_POST["site"] ;
$empresa = $_POST["empresa"] ;
$cargo = $_POST["cargo"] ;
$assunto = $_POST["assunto"] ;
$mensagem = $_POST["mensagem"] ;
$from = "Formulário de Contato - Site Colab";
$to = "[email protected]";
$subject = "blablabla";

$body = "De = $nome\n E-mail: $email\n Website: $site\n Empresa: $empresa\n Cargo: $cargo\n Assunto: $assunto\n  Mensagem:\n $mensagem" ;

if ($_POST['enviar']) {
mail ($to, $subject, $body, $from);     
}

validate.form

$("#enviar").click(function(){
    var nome = $("input[name='none']").val();
    var email = $("input[name='email']").val();
    var assunto = $("input[name='assunto']").val();
    var mensagem = $("input[name='mensagem']").val();
    var invalido_form = $("#invalido_form");
    if (nome == "") {
        invalido_form.html("O campo nome deve ser preenchido");
        return false
    }
    if (email == "") {
        invalido_form.html("O campo E-mail deve ser preenchido");
        return false;
    }
    if (assunto == "") {
        invalido_form.html("O campo Assunto deve ser preenchido");
        return false;
    }
    if (mensagem == "") {
        invalido_form.html("O campo Mensagem deve ser preenchido");
        return false;
    }

    $.post("contato.php", $("form[name='form_contato']").serialize(), function(data) {
        invalido_form.html("Sua mensagem foi enviada!");
        alert(data);
    });
});
2
  • Boa, Wéllingthon. Funcionou muito bem! O que você fez foi rodar o php depois que os campos validassem? Commented 17/08/2017 às 2:52
  • Utilizando post via ajax do jQuery, fica mais elegante e você consegue recuperar dados retornados.
    – NoobSaibot
    Commented 17/08/2017 às 3:19
0

Acho a solução com iframe muito boa, simples e eficaz, e a solução com Ajax é bem poderosa também, e não é muito mais complicada, porém exige que o usuário tenha habilitado o javascript na sua página (solução do iframe não precisa).

A 3ª solução, mandando o form para a página PHP que faz todo o trabalho, e ela mandando de volta com uma mensagem na URL, que você tentou com header("url: contato.html?sent=true");, também funciona muito bem. Nessa opção, porém, a página é sim redirecionada, e talvez não seja o efeito que você busca.

Para funcionar, é necessário começar o arquivo sem escrever nada, nem com echo e nem fora da tag <?php, o HTML normal, ou senão tomará na tela aquele erro indicando que o cabeçalho já foi enviado.

Para evitar isso, comece o seu arquivo já abrindo a tag do PHP e fazendo tudo o que precisa. Aí se resolver redirecionar não terá o erro.

Ou ainda, use no início a função [ob_start][1](), aí no caso pode escrever a vontade, pois nada é enviado até o final do script ou até chamar o [ob_end_flush][1]():

<?php
ob_start();
echo 'isso vai no buffer, não direto para o browser';
header("url: contato.html?sent=true");

Agora, se você já garantiu que não tem nenhum caractere antes da tag na primeira linha e ainda assim leva o erro, verifica sem o seu arquivo não foi salvo como UTF-8 com BOM (byte order mask). Esse BOM é o que atrapalha, pois ele é mandado antes da tag, precisaria salvar o arquivo como UTF-8 sem esse BOM. Eu uso o Notepad++ no Windows, então é só ir em Formatar -> Converter para UTF-8 sem BOM e salvar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .