Form using jQuery AJAX PHP does not send field input in email

Question

I have this contact form and I'm trying to use jQuery/AJAX and PHP to have the field input values sent to me via email. Well, the email sends to me just fine, but without any of the field input. The email is just the $to and the $subject of the PHP mail() function. Please see code below. Any ideas, critiques, or suggestions are welcome. Thanks for your help!

$(document).ready(function() {    

$(function() {

// Get the form.
var form = $('#ajax-contact');

// Get the messages div.
//var formMessages = $('#form-messages');

// Set up an event listener for the contact form.
$("button").click(function(e) {

    // Stop the browser from submitting the form.
    e.preventDefault(e);

    // Serialize the form data.
    var formData = $(form).serialize();

    // Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData,
        success: function(result){
            $('#contact-name').val('');
            $('#contact-email').val('');
            $('#contact-website').val('');
            $('#contact-message').val('');
        },
        error: function(xhr,status,error){

        }
    });


});

});

});

<?php
require_once 'swiftmailer/lib/swift_required.php';

//Swift Mailer script

$filter = FILTER_SANITIZE_STRING;

//Grab POST Data
$name = filter_var($_POST['contact-name'], $filter);
$email = filter_var($_POST['contact-email'], FILTER_SANITIZE_EMAIL);
$website = filter_var($_POST['contact-website'], FILTER_SANITIZE_URL);
$message = filter_var($_POST['contact-message'], $filter);


//Create email body
$body = "Name: " . $name . "<br />" . "Email: " . $email . "<br />" .   "Website: " . $website . "<br />" . "Message: " . $message;

//Create Transport
$transport = Swift_SmtpTransport::newInstance("host", "port", "security")
->setUsername("username")
->setPassword("password");

//Create Mailer
$mailer = Swift_Mailer::newInstance($transport);
$message = Swift_Message::newInstance('New Form')
->setFrom(array("email" => "Lead from Contact form"))
->setTo(array('email', 'email' => 'Recipients'))
->setSubject('You have a new message!')
->setBody($body, 'text/html');

//Send Message
$result = $mailer->send($message);

if ($result) {

// Set a 200 (okay) response code. //http_response_code(200); echo "Thank You! Your message has been sent."; } else { // Set a 500 (internal server error) response code. //http_response_code(500); echo "Oops! Something went wrong and we couldn't send your message."; }

?>

Answer 1

Use val() function to get data from inputs

$(document).ready(function(e) {

$("button").click(function(e) {
e.preventDefault();
    var ajax = {
        isSubmitting: false,
        send: function() {
            if(ajax.isSubmitting == false) {

                ajax.isSubmitting = true;
                var userName = $('input[name="contact-name"]').val(); 
                var userEmail = $('input[name="contact-email"]').val(); 
                var userWebsite = $('input[name="contact-website"]').val(); 
                var userMessage = $('input[name="contact-message"]').val(); 

                if(userName === "" || userEmail === "" || userWebsite === "" || userMessage === "") {
                    alert("Please fill out all required fields.");
                } 
                else {
                    $.post("mailer3.php", {
                        name: userName,
                        email: userEmail,
                        website: userWebsite,
                        message: userMessage

                    }, function(data) {

                        ajax.isSubmitting = false;

                    });
                }
            }
            else alert("Send only 1 email at a time.");
        }
    }

});

Try this using $.ajax:

$("button").click(function(){
     isSubmitting: false;
     var userName = $('input[name="contact-name"]').val(); 
     var userEmail = $('input[name="contact-email"]').val(); 
     var userWebsite = $('input[name="contact-website"]').val(); 
     var userMessage = $('input[name="contact-message"]').val(); 

    if(isSubmitting == false) {

    $.ajax({url: "mailer3.php",
            type:'POST',
            data:{
            name: userName,
            email: userEmail,
            website: userWebsite,
            message: userMessage
             },
            success: function(result){
               isSubmitting == true;
            },error(xhr,status,error){
               isSubmitting == false;
            }
    });

    }
});

Answer 2

As you are not using the jQquery val(); method to retrieve your input feild value whioch is why you are unable to get value. Use the chain method val() with the elements calling as shown below

`$(document).ready(function(e) { //e.preventDefault(); $("button").click(function(e) {

var ajax = {
    isSubmitting: false,
    send: function() {
        if(ajax.isSubmitting == false) {

            ajax.isSubmitting = true;
            var userName = $("input[name=contact-name]").val(); 
            var userEmail = $("input[name=contact-email]").val(); 
            var userWebsite = $("input[name=contact-website]").val(); 
            var userMessage = $("input[name=contact-message]").val(); 

            if(userName === "" || userEmail === "" || userWebsite === "" || userMessage === "") {
                alert("Please fill out all required fields.");
            } 
            else {
                $.post("mailer3.php", {
                    name: userName,
                    email: userEmail,
                    website: userWebsite,
                    message: userMessage

                }, function(data) {

                    ajax.isSubmitting = false;

                });
            }
        }
        else alert("Send only 1 email at a time.");
    }
} `

Answer 3

I did end up figuring this out. My revised code is at the top is what I used to get the email sending with the data. Used SwiftMailer. Just have to finish up a couple things. Thanks for everyone's input on this!

Andrew