1

Como criar um formulário com ajax que ao pressionar o botão de enviar ele não te redirecione para uma outra página mas sim uma mensagem logo abaixo de "Dados enviados".

Segue um exemplo de código que estou estudando, porém este te redireciona para uma outra página no caso sendemail.php.

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>

4 Respostas 4

2

Podes fazer, tirei o name que tinhas no form e coloquei 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;
});
5
  • 1
    uma alternativa interessante e aumenta um pouco mais a produtividade seria usar o método do jquery "Serializer()", ele captura todos os campos do seu forme e abstrai a declaração/chamada dos campos na função no método submit(). veja a documentação, é bem simples o uso api.jquery.com/serialize 3/01/2017 às 19:06
  • Obrigado @LeandroMacedo , por acaso nunca usei esse metodo, como é que ele constroí a variável data?
    – Miguel
    3/01/2017 às 19:08
  • Nesse caso irá remover a variáveis "nome","email", etc e em data deve ficar algo parecido com isso: data: { $("#contactform").serializer() }, e no seu php vc recebe os campos pelo nome q atribuiu no form 3/01/2017 às 19:12
  • Ha boa, não sabia, estou farto de ver mas na verdade nunca usei. Obagdo @LeandroMacedo
    – Miguel
    3/01/2017 às 19:13
  • haha. De nada imagina 3/01/2017 às 19:14
2

Você pode só mudar colocar o target no 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>

Para fazer algo realmente em AJAX você vai precisar fazer isso em Javascript buscando na web vc acha isto (com JS puro) e aquilo (com jquery)

1

Seria isso. Precisa só incluir o arquivo jquery, caso ainda não use.

    <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!";

?>
1

No php // no head

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

serialize pega os campos do form e transforma em uma string get variavel&variavel O sendemail.php recebe os parâmetros por GET

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 .