AJAX contact form without refresh

Navigation
0

How to create a form with ajax that when pressing the send button it will not redirect you to another page but a message just below "Sent data".

Here is an example of a code I'm studying, but it redirects you to another page in the sendemail.php case.

index.php 

<!DOCTYPE html>
        <html>
        <head>
            <title></title>
        </head>
        <body>

        <form name="contactform" method="post" action="sendemail.php">

            Nome: <input type="text" name="nome" /> </br>
            E-mail: <input type="text" name="email" /> </br>
            Assunto: <input type="text" name="assunto" /> </br>
            Menssagem: <textarea name="menssagem"></textarea>

            <input type="submit" value="Enviar Menssagem" />

        </form>

        </body>
        </html>

sendemail.php 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<?php 

$nome = $_POST['nome'];
$email = $_POST['email'];
$assunto = $_POST['assunto'];
$menssagem = $_POST['menssagem'];


?>

<?php 

$to = "[email protected]";
$subject = "$assunto";
$menssagem = "<strong>Nome:</strong> $nome<br /><br /><strong>E-mail:</strong>$email<br /><br /><strong>Assunto:</strong> $assunto<br /><br /><strong>Menssagem:</strong> $menssagem ";
$header = "MIME-Version: 1.0\n";
$header .= "Content-type: text/html; charset=iso-8859-1\n";
$header .= "From: $email\n";
mail($to, $subject, $menssagem,$header);
echo "Enviado!";

?>


</body>
</html>
    
asked by anonymous 03.01.2017 / 15:16

4 answers

1

You can do, I took the name that you had in the form and put id :

HTML: 

<form id="contactform" method="post" action="sendemail.php">

        Nome: <input type="text" name="nome" /> </br>
        E-mail: <input type="text" name="email" /> </br>
        Assunto: <input type="text" name="assunto" /> </br>
        Menssagem: <textarea name="menssagem"></textarea>

        <input type="submit" value="Enviar Menssagem" />
       <div id="resp"></div>
    </form>

JS: 

$('#contactform').submit(function(e) {
    e.preventDefault();
    const nome = $('input[name="nome"]').val();
    const email = $('input[name="email"]').val();
    const assunto = $('input[name="assunto"]').val();
    const mensagem = $('textarea[name="mensagem"]').val();
    $.ajax({
        url: 'sendemail.php', // caminho para o script que vai processar os dados
        type: 'POST',
        data: {nome: nome, email: email, assunto: assunto, mensagem: mensagem},
        success: function(response) {
            $('#resp').html(response);
        },
        error: function(xhr, status, error) {
            alert(xhr.responseText);
        }
    });
    return false;
});
    
03.01.2017 / 15:33
1

You can only change the target on form 

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>

    <form name="contactform" method="post" action="sendemail.php" target="local_onde_sera_exibido_a_msg">

        Nome: <input type="text" name="nome" /> </br>
        E-mail: <input type="text" name="email" /> </br>
        Assunto: <input type="text" name="assunto" /> </br>
        Menssagem: <textarea name="menssagem"></textarea>

        <input type="submit" value="Enviar Menssagem" />
    </form>
    <iframe id="local_onde_sera_exibido_a_msg"></iframe>
    </body>
</html>

To do something really in AJAX you will need to do this in Javascript by searching the web, you find this (with JS pure) and that (with jquery)

    
03.01.2017 / 15:31
0

That would be it. You only need to include the jquery file if you do not already use it.

                                                

    <form name="contactform" method="post" action="sendemail.php">

        Nome: <input type="text" name="nome" /> </br>
        E-mail: <input type="text" name="email" /> </br>
        Assunto: <input type="text" name="assunto" /> </br>
        Menssagem: <textarea name="menssagem"></textarea>

        <input type="button" value="Enviar Menssagem" id="enviar" />

    </form>
    <script>
       $("#enviar").click(function(){
       $.ajax({
           dataType:'html',
           url:"sendemai.php",
           type:"POST",
           data:({mensagem:$("input[name='nome']").val(),email:$("input[name='email']").val(),assunto:$("input[name='assunto']").val(),mensagem:$("input[name='mensagem']").val()}),

           beforeSend: function(data){ 

            }, success:function(data){
                alert("Dados Enviados");
            }, complete: function(data){}


           });
            });
    </script>
    </body>
    </html>

sendemail.php      

$nome = $_POST['nome'];
$email = $_POST['email'];
$assunto = $_POST['assunto'];
$menssagem = $_POST['menssagem'];


$to = "[email protected]";
$subject = "$assunto";
$menssagem = "<strong>Nome:</strong> $nome<br /><br /><strong>E-mail:</strong>$email<br /><br /><strong>Assunto:</strong> $assunto<br /><br /><strong>Menssagem:</strong> $menssagem ";
$header = "MIME-Version: 1.0\n";
$header .= "Content-type: text/html; charset=iso-8859-1\n";
$header .= "From: $email\n";
mail($to, $subject, $menssagem,$header);
echo "Enviado!";

?>
    
03.01.2017 / 15:34
0

In php  // not head

JS with Jquery script.js jQuery (document) .ready (function () { jQuery ('# Form_ws'). submit (function () {         loading (1);         var data = jQuery (this) .serialize ();         jQuery.ajax ({             type: "GET",             url: "sendemail.php",             data: data, ...

serialize takes form fields and transforms into a variable get variable & variable Sendemail.php receives the parameters by GET

    
03.01.2017 / 15:36
Error when using PDO: "Call a member function query () on a non-object in ..." mysqli: Could not fetch mysqli_result