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

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){

        }
    });


});

});

  • $.ajax delete request not sending data parameters in capybara-webkit
  • Angular onreadystatechange
  • When does the browser execute Javascript? How does the execution cursor move?
  • pass variable through javascript
  • Logging xhr requests while doing e2e-tests with protractor
  • OPTIONS 405 (Method Not Allowed)
  • });

    <?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.”;
    }

    ?>
    

  • How to call page method without page-reload?
  • Time Interval between two CORS requests using jquery ajax
  • Update Javascript after Async Post Back in ASP.NET
  • Lightweight JS AJAX library
  • parse JSON object passed through Ajax
  • Javascript modification query
  • 3 Solutions collect form web for “Form using jQuery AJAX PHP does not send field input in email”

    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;
                }
        });
    
        }
    });
    

    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.");
        }
    } `
    

    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