Send message on the same page after form Ubmit

Asked

Viewed 3,914 times

0

I have a form included within a modal window. My question is how it should be done to appear a completed sending message within the modal window after the form is sent, all this process would need to be done within the same page, without updating the page.

All code: CSS, HTML and Jquery is in codepen: http://codepen.io/flashpremium/pen/KpzqoJ/

Php code of the form

header('Content-Type: text/html; charset=utf-8');

           // from the form
           $name = trim(strip_tags($_POST['nome']));
           $email = trim(strip_tags($_POST['email']));
           $assunto = htmlentities($_POST['assunto']);
           $mensagem = htmlentities($_POST['mensagem']);


           // set here
           $subject = "Nova mensagem no formulário";
           $to = '[email protected]';
           $body = <<<HTML
    <table bgcolor="#EEEEEE" align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="font-family: arial; border: 1px solid #f4f4f4; border-radius: 5px;">
     <tr>
      <td bgcolor="#fff" style="text-align: left; padding: 10px; margin: 5px 5px 5px 5px; color: #222; font-weight: bold; border: 1px solid #f4f4f4; font-weight: 100; font-size: 14px;">
     Dados
      </td>
       <td bgcolor="#fff" style="text-align: left; padding: 10px; margin: 5px 5px 5px 5px; color: #222; font-weight: 100; border: 1px solid #f4f4f4; font-size: 14px;">
     Mensagem
      </td>
     </tr>
     <tr>
      <td bgcolor="#fff" style="padding: 10px;border: 1px solid #f4f4f4;color: #33b0f7; font-size: 14px;">
        Nome
        <td bgcolor="#fff" style="text-align: left; padding-left: 5px;border: 1px solid #f4f4f4; font-size: 14px;">$name</td>
     </tr>
        <tr>
         <td bgcolor="#fff" style="padding: 10px;border: 1px solid #f4f4f4;border: 1px solid #f4f4f4; color: #33b0f7; font-size: 14px;">
             E-mail
             <td bgcolor="#fff" style="text-align: left; padding-left: 5px;border: 1px solid #f4f4f4; font-size: 14px;">$email</td>
           </td> 
       </tr>
           <tr>
            </tr>
        <tr>
         <td bgcolor="#fff" style="padding: 10px;border: 1px solid #f4f4f4; font-size: 14px;">
        Mensagem:
        <td bgcolor="#fff" style="text-align: left; padding: 5px; height: 400px;border: 1px solid #f4f4f4; font-size: 14px;">$message</td>
      </td>
       </tr>
     </tr>
    </table>
    HTML;

           $headers = "From: $email\r\n";
           $headers .= "Content-type: text/html\r\n";
           // send the email
           mail($to, $subject, $body, $headers);

           // redirect afterwords, if needed
           header('Location: enviado');
php jquery html

2 answers

2


Ajax does exactly that, it will send the form to PHP without any refresh. 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#ajax_form').submit(function(){
        var dados = jQuery( this ).serialize();

        jQuery.ajax({
            type: "POST",
            url: "processa.php",
            data: dados,
            success: function( data )
            {
                alert( data );
            }
        });

        return false;
    });
});
</script>

  • Thank you for the answer! I’m having doubts about how to put the success message in the sending inside a div that should only appear after the email is sent.

0

On top of the example of lai0n, I got something I was looking for, which is probably also closer to what you want to do. I modified the Function to insert the sending message in a div and removed the 'Alert' function'.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#ajax_form').submit(function(){
        var dados = jQuery( this ).serialize();

        jQuery.ajax({
            type: "POST",
            url: "newsletter-form.php",
            data: dados,
            success: function envio()
            {
            var cont = "Email enviado com sucesso";
            document.getElementById("msg").innerHTML = cont;
            }
        });

        return false;
    });
});
</script>

and inside the body:

    <div id="msg"></div>

The cool thing is that you can style the div in css and leave with that typical green background of successful messages.

Note: I apologize to Ricardo for gaffe, I just signed up and I’m still adapting to the rules of the site.

Browser other questions tagged php jquery html

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