Display div after sending emails via POST Ajax PHP

Asked

Viewed 302 times

0

I’m learning to email via POST in Ajax. What I have is right, the only thing is that after sending the email, it does not load the form (HTML returns), getting a hole in the screen:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

        <!-- Sweetalert -->
        <script type="text/javascript" src="js/sweetalert-master/dist/sweetalert.min.js"></script>
        <link rel="stylesheet" type="text/css" href="js/sweetalert-master/dist/sweetalert.css">     

        <title>Enviando e-mail com AJAX e PHP via protocolo SMTP - Vinteum Desenvolvimento</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script>
            $(document).ready( function(){ //Quando documento estiver pronto
                $('#btn').click( function(){ /* Quando clicar em #btn */
                    /* Coletando dados */
                    var nome  = $('#nome').val(); 
                    var email = $('#email').val(); 
                    var msg   = $('#msg').val();                                            

                    /* Validando */
                    // if(nome.length <= 3){           
                    //     alert('Informe seu nome');                        
                    //     return false;           
                    // }                         
                    // if(email.length <= 5){           
                    //     alert('Informe seu email');                        
                    //     return false;           
                    // }      
                    // if(msg.length <= 5){           
                    //     alert('Escreva uma mensagem');                    
                    //     return false;           
                    // }                     

                    /* construindo url */
                    var urlData = "&nome=" + nome + "&email=" + email + "&msg=" + msg ;

                    /* Ajax */
                    $.ajax({
                         type: "POST",
                         url: "sendmail.php", /* endereço do phpmailer */
                         async: true,
                         data: urlData, /* informa Url */
                         success: function(data) { /* sucesso */
                             $('#retornoHTML').html(data);
                         },
                         beforeSend: function() { /* antes de enviar */
                             $('.loading').fadeIn('fast'); 
                         },
                         complete: function(){ /* completo */               
                             $('.loading').fadeOut('fast');
                         }
                     });
                });    
            });
        </script>
        <style>
            .loading { display: none; }
        </style>
    </head>
    <body>        
        <h1><a href="http://vinteum.com/enviando-email-com-ajax-php-smtp">Enviando e-mail com AJAX e PHP via protocolo SMTP</a></h1>
        <em>Vinteum Desenvolvimento</em>
        <p>&nbsp;</p>        
        <div id="retornoHTML">
            <form>            
                Nome<br>
                <input id="nome" maxlength="10" type="text"><br>
                E-mail<br>
                <input id="email" maxlength="15" value="[email protected]" type="text"><br>
                Mensagem:<br>
                <textarea cols="50" rows="7" id="msg" maxlength="50"></textarea><br>
                <input type="button" id="btn" value="ENVIAR">
                <img src="loading.gif" class="loading">
            </form>
        </div>                 
    </body>
</html>
php ajax

  • do the following in the ajax sequence instead of using html use this, $('#retnoHTML'). append(data); if it works as a response and explain

  • It would show the sendmail.php file?

  • What exactly is carrega o formulário (retornoHTML) 'Cause apparently you want to carry urlData in the div retornoHTML

  • sendmail <? php /* * template for using the Phpmailer class */ //echo 'Message sent successfully. <br><a href="http://vinteum.com/? p=1878">BACK TO TUTORIAL</a>'; //return (html) returned to ajax if successful echo " <script type="text/javascript"> swal({ title: "Sent", text: "Thank you for your contact!" , confirmButtonColor: "#FF6000", type: "Success" }); </script> "; ?>

  • If I put $('#returnHTML'). append(date); it works, but now the form fields are filled.

1 answer

1

To load the variable value urlData in the div retornoHTML after the request is successful:

success: function(data) { /* sucesso */
    $("#retornoHTML").html(urlData);
},
.....................

Browser other questions tagged php ajax

You are not signed in. Login or sign up in order to post.