Prevent redirection after submitting form

0

I'm a beginner in programming and I have a little problem here. I have already done a good search here in stackoverflow, both in Portuguese and in English, but I could not adpatar or put a solution in practice here. I apologize if the code does hurt in your eye, but start is beginning, hehehe.

It is as follows, it has a form that calls the "contact.php" code with action and when it clicks to send, it performs 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 happens that after sending, it redirects to the page "contato.php" and I wanted it to do nothing, only stay on the page where it appears a text saying that the message was sent. The solutions I saw consisted of putting something like:

  

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

But if I try this, it ends up returning this error for me:

  

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

Other solutions were in the use of AJAX, but were directed to those who already knew how it works and I do not know anything about it yet. That's my question, can you prevent this redirect without using AJAX? Or will I have to learn urgently?

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>

contact.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;
    }
}
    
asked by anonymous 17.08.2017 / 04:11

3 answers

2

Enter a hidden iframe on the page:

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

Add in the <form> attribute as target="contato" .

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

    
17.08.2017 / 04:29
1

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

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

$("#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);
    });
});
    
17.08.2017 / 04:36
0

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

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

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

To avoid this, start your file by already opening the PHP tag and doing everything you need. So if you decide to redirect you will not get the error.

Or, use the [ob_start][1]() function in the beginning, in this case you can write the will, because nothing is sent until the end of the script or until you call [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 ensured that you do not have any characters before the tag on the first line and still takes the error, it checks without your file being saved as UTF-8 with BOM (byte order mask) . This BOM is what disrupts, 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 BOM and save.

    
16.03.2018 / 06:18