Send message on same page after submit in form

Question

Send message on same page after submit in form

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

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

All code: CSS, HTML and Jquery is in the codepen: link

Form php code

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 html jquery

asked by anonymous 26.07.2015 / 01:18

2 answers

0

On top of the lai0n example, 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 message of sending in a div and I removed the function 'alert'.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><scripttype="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 it with that typical green background of success messages.

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

12.08.2015 / 18:10

Fountain changing weight Comparing variables in a query

score 2 · Accepted Answer

Ajax does just 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><scripttype="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>