Prevent redirect after submitting the form

Question

I’m a beginner in programming and I have a little problem here. I have already done a good research here in stackoverflow, both in Portuguese and in English, but I could not adapt or put a solution in practice here. I apologize if the code hurts in your eye, but start is start, hehehe.

Here’s the thing, there’s a form that calls with action the code "contact.php" and when it clicks to send, it executes a function in javascript, a simple validation that checks if the required fields are filled with something and then the form is sent to an email. All this works very well, it turns out that after sending, it redirects to the page "contact.php" and I wanted her to do nothing, just stay on the page where appears a text saying that the message was sent. The solutions I saw were to put something like:

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

But if I try this, it ends up returning this mistake to me:

Cannot Modify header information - headers already sent by (output >Started at /Applications/MAMP/htdocs/Contact_colab/contact.php:1)

Other solutions were in the use of AJAX, but were targeted to those who already knew how it works and I don’t know anything about it yet. There is my question, is there any way to prevent this redirection without using AJAX? Or I will have to learn emergentially?

Form

<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>

php contact.

<?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;
    }
}

Answer 1

Insert a iframe hidden on the page:

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

Add to <form> the attribute target="contato".

Thus, the form will be sent to iframe hidden inside the page itself.

Answer 2

Add the jQuery

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

Form

<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>

php contact.

$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);
    });
});

Answer 3

I find the solution with iframe very good, simple and effective, and the solution with Ajax is very powerful too, and is not much more complicated, but requires that the user has enabled javascript on their page (iframe solution does not need).

The third solution, sending the form to the PHP page that does all the work, and it sending back a message in the URL, which you tried with header("url: contato.html?sent=true");, also works very well. In this option, however, the page is redirected, and maybe not the effect you seek.

To work, it is necessary to start the file without writing anything, nor with echo and not outside the tag <?php, normal HTML, or else it will take on the screen that error indicating that the header has already been sent.

To avoid this, start your file already opening the PHP tag and doing everything you need. Then resolve redirect will not have the error.

Or, use the function at the beginning [ob_start][1](), then in case you can write the will, because nothing is sent until the end of the script or even call the [ob_end_flush][1]():

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

Now, if you have already guaranteed that there is no character before the tag in the first line and still takes the error, check without your file has not been saved as UTF-8 with GOOD (byte order Mask). This BOM is what disturbs, because it is sent before the tag, would need to save the file as UTF-8 without this BOM. I use Notepad++ on Windows, so just go to Format -> Convert to UTF-8 without GOOD and save.