JQuery AJAX form process without refresh

StackOverflow https://stackoverflow.com/questions/21631965

  •  08-10-2022
  •  | 
  •  

Question

I am new to JQuery and havent used AJAX at all. I have searched the web for days with no complete answer.

Im trying to have a form be emailed via AJAX while JQuery hides the form and displays additional data. The JQuery portions works as the pages switches to display the proper data but the form information doesnt get emailed.

JQuery/AJAX

$(document).ready(function() {
        //When the form is submitted...
        $('form').on('submit',function(e) {
            //Send the serialized data to mailer.php.
            $.ajax({
                url:'mailer.php',
                data:$(this).serialize(),
                type:'POST',
                success:function(data){
                console.log(data);
                $("#success").show().fadeOut(5000); //=== Show Success Message==
                },
                error:function(data){
                $("#error").show().fadeOut(5000); //===Show Error Message====
                }
            });
            e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
            //$.post("mailer.php");
            //Take our response, and replace whatever is in the "form2"
            //div with it.
            $('#form1').hide();
            $('#form2').show();
        });
    });

PHP Submit file mailer.php

<?php          
        //Grab Posted Data
        $fname   = strip_tags(htmlentities($_POST['fname']));
        $lname   = strip_tags(htmlentities($_POST['lname']));
        $name = $fname." ".$lname;
        $email   = strip_tags($_POST['email']);
        $phone   = strip_tags(htmlentities($_POST['phone']));
        $address = strip_tags(htmlentities($_POST['address']));
        $city    = strip_tags(htmlentities($_POST['city']));
        $state   = strip_tags(htmlentities($_POST['state']));
        $zip     = strip_tags(htmlentities($_POST['zip']));
        $country = strip_tags(htmlentities($_POST['country']));
        $message = strip_tags(htmlentities($_POST['goals']));

        // PREPARE THE BODY OF THE MESSAGE

        $message = '<html><body>';

        $message .= '<table rules="all" style="border-color: #666;" cellpadding="10">';
        $message .= "<tr style='background: #eee;'><td><strong>Name:</strong> </td><td>$name</td></tr>";
        $message .= "<tr><td><strong>Email:</strong> </td><td>$email</td></tr>";
        $message .= "<tr><td><strong>Phone:</strong> </td><td>$phone</td></tr>";
        $message .= "<tr><td><strong>Address:</strong> </td><td>$address</td></tr>";
        $message .= "<tr><td>&nbsp;</td><td>$city, $state $zip $country</td></tr>";
        $message .= "<tr><td><strong>Goals:</strong> </td><td>$message</td></tr>";

        $message .= "</table>";
        $message .= "</body></html>";


        //   CHANGE THE BELOW VARIABLES TO YOUR NEEDS

        $to = 'me@me.com';

        $subject = 'Website Change Reqest';

        $headers = "From: $email \r\n";
        $headers .= "Reply-To: $email \r\n";
        $headers .= "MIME-Version: 1.0\r\n";
        $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

if (mail($to, $subject, $message, $headers)) {
          echo 'Your message has been sent.';
        } else {
          echo 'There was a problem sending the email.';
        }

?>
Was it helpful?

Solution

PHP mail() uses sendmail system, and most of the problems happens when it is not set up properly. Sometimes webhosters disable it outright.

Sometimes, i solved this problem by using an external library, PhpMailer, for example, and SMTP with a real mail account.

On a side note - never ever do this: 

    $fname   = strip_tags(htmlentities($_POST['fname']));
    $lname   = strip_tags(htmlentities($_POST['lname']));
    $name = $fname." ".$lname;
    $email   = strip_tags($_POST['email']);
    $phone   = strip_tags(htmlentities($_POST['phone']));
    $address = strip_tags(htmlentities($_POST['address']));
    $city    = strip_tags(htmlentities($_POST['city']));
    $state   = strip_tags(htmlentities($_POST['state']));
    $zip     = strip_tags(htmlentities($_POST['zip']));
    $country = strip_tags(htmlentities($_POST['country']));
    $message = strip_tags(htmlentities($_POST['goals']));

It can be easily replaced by something like:

     extract(
        array_map(
           function($elem) {
              return strip_tags(html_entities($elem));
           }, $_POST)
     );

OTHER TIPS

I've already got a problem like this. The issue was not in javascript code, but in php's mail() function.

Happened that nowadays most mail servers do not support unauthenticated e-mail to be sent. See that in order to use mail() function you never provided an username or password to log in a mail server.

My issue was solved using the PHPMailer class (available at http://phpmailer.worxware.com), in witch I provide mailserver's address, account username and password. Thought it is quite easy to create an HTML e-mail with attachments without worry about writing long header codes.

Did you use Denwer for test this example?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top