CODEWITHSUNDEEP
phpjqueryhtmlajaxxmlhttprequest
Ilan Biala
Ilan Biala

Reputation: 3419

Set up Ajax to send form results to php file for email

I currently have a contact form on this site that I am looking to migrate from the php result to an ajax result. I used a mail.php file with this code:

<?php
 $firstname = $_POST['firstName'];
 $lastname = $_POST['lastName']; 
 $email = $_POST['email'];
 $tel1 = $_POST['tel1'];
 $tel2 = $_POST['tel2'];
 $tel3 = $_POST['tel3'];
 $reason = $_POST['reason'];
 $message = $_POST['text'];
 $formcontent="From: $firstname $lastname \n Email address: $email \n Telephone Number: $tel1 $tel2 $tel3 \n Reason: $reason \n Message: $message";
 $recipient = "[email protected]";
 $subject = "Contact Form";
 $mailheader = "From: $email \r\n";
 mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
 echo "<script>alert('Thank you!');</script>";
 ?>

This php file sent an email with the contact form results. However, it also reloaded the page and brought up an alert box on a blank page, which is not what I intended. I am looking to use the jquery ajax function to make it so that ajax will send the information to my php file to mail, unless I can just mail the contact form directly from ajax getting the result.

The contact form is submitted through this ajax function:

function submitForm(form) {
    var form = $("form").submit(function() {
        var formData = new FormData(form);
        console.log("formData");
        var XHR;
        if (window.XHMLHttpRequest){XHR = new XHMLHttpRequest();}
        else {XHR = new ActiveXObject("Microsoft.XMLHTTP");}
        XHR.open("POST","mail.php",true);
        console.log("XHR opened.");
        XHR.onreadystatechange = function(e) {
            if (this.readyState == 4 && this.status == 200) {
                XHR.send(formData);
                console.log("Sent formData.");
            }
        }
    });
}

Upvotes: 0

Views: 784

Answers (3)

petermk
petermk

Reputation: 777

As it has already been mentioned, you can use a simple AJAX call to achieve what you want. However, instead of 

echo "<script>alert('Thank you!');</script>";

I'd suggest something like this:

header('Content-type: application/json');
if(mail($recipient, $subject, $formcontent, $mailheader)) {
    echo "{'msg':'email has been sent'}";
} else {
    echo "{'error':'there was an error sending email'}";
}

Then in the AJAX call, you can take the returned JSON object and display a success/error message on your page.

Upvotes: 0

rink.attendant.6
rink.attendant.6

Reputation: 46258

On the page that you have linked your form has an id of form, so I'll go with that in my example code:

JavaScript code

$(document).ready(function(){
    $('#form').submit(function(e){
        e.preventDefault();

        $.post($(this).attr('action'), $(this).serialize(), function(data) {
            // do whatever with the data returned
            console.log(data);
        });
    }, 'text');
});

This is a very simple example, and in your <form> tag in HTML you'd need to add the action attribute (in your case it would be mail.php).

PHP code

<?php

 $firstname = $_POST['firstName'];
 $lastname = $_POST['lastName']; 
 $email = $_POST['email'];
 $tel1 = $_POST['tel1'];
 $tel2 = $_POST['tel2'];
 $tel3 = $_POST['tel3'];
 $reason = $_POST['reason'];
 $message = $_POST['text'];
 $formcontent="From: $firstname $lastname \n Email address: $email \n Telephone Number: $tel1 $tel2 $tel3 \n Reason: $reason \n Message: $message";
 $recipient = "[email protected]";
 $subject = "Contact Form";
 $mailheader = "From: $email \r\n";

 if(mail($recipient, $subject, $formcontent, $mailheader)) {
     echo 'Thank you!';
 } else {
     echo 'Error!';
 }

?>

You can attempt even fancier things with JSON, for instance, but for this example I've kept it quite simple.

Upvotes: 1

Sudip Kafle
Sudip Kafle

Reputation: 4391

You can use jQuery's .ajax. 

$.ajax({
        type: "POST",
        url: "mail.php",
        data: { firstname: nameVar, email: emailVar............ }
    }).done(function( msg ) {
        alert( msg );
    });

Upvotes: 2

Related Questions