Why does AJAX cause my form submission to be empty?

Question

I want to build contact form validation using AJAX/JavaScript to make sure the page doesn't reload after form submission. E-mail formatting is handled in a PHP script.

E-mail formatting and sending worked fine before including the AJAX validation, but now I just get an empty e-mail.

What do I need to change in my AJAX code in order to send the form input to my e-mail correctly?

Thanks in advance!

This is my AJAX code:

const contactForm = document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener("submit", function(e) {
        e.preventDefault();

        const formData = document.getElementById('contact-form');
        let data = new FormData(formData);

        const xhr = new XMLHttpRequest();
        xhr.open('POST', "contactform.php", true);
        xhr.setRequestHeader('Content-type', "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById('contact-form').reset();
                document.querySelector('.response').innerHTML = '<p class="alert alert-success">Bedankt voor uw bericht. Wij nemen zo snel mogelijk contact met u op.</p>';
            } else {
                document.querySelector('.response').innerHTML = '<p class="alert alert-danger">Er is iets misgegaan.</p>';
            }
        };
        xhr.send(data);
    })
})

PHP code:

<?php
    $assignmentchoice = $_POST['assignmentchoice'];
    $projectchoice = $_POST['projectchoice'];
    $name = $_POST['name'];
    $lastname = $_POST['lastname'];
    $email = $_POST['email'];
    $phonenumber = $_POST['phonenumber'];
    $address = $_POST['address'];
    $zipcode = $_POST['zipcode'];
    $message = $_POST['message'];
    $email_body = "";

    if(isset($_POST['assignmentchoice'])) {
        $assignmentchoice = filter_var($_POST['assignmentchoice'], FILTER_SANITIZE_STRING);
        $email_body .= "Opdracht: ".$assignmentchoice."\r\n";
    }

    if(isset($_POST['projectchoice'])) {
        $projectchoice = filter_var($_POST['projectchoice'], FILTER_SANITIZE_STRING);
        $email_body .= "Project: ".$projectchoice."\r\n";
    }

    if(isset($_POST['name'])) {
        $name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
        $email_body .= "Voornaam: ".$name."\r\n";
    }

    if(isset($_POST['lastname'])) {
        $lastname = filter_var($_POST['lastname'], FILTER_SANITIZE_STRING);
        $email_body .= "Achternaam: ".$lastname."\r\n";
    }

    if(isset($_POST['email'])) {
        $visitor_email = str_replace(array("\r", "\n", "%0a", "%0d"), '', $_POST['email']);
        $visitor_email = filter_var($email, FILTER_VALIDATE_EMAIL);
        $email_body .= "Email adres: ".$email."\r\n";
    }
      
    if(isset($_POST['phonenumber'])) {
        $phonenumber = filter_var($_POST['phonenumber'], FILTER_SANITIZE_NUMBER_INT);
        $email_body .= "Telefoonnummer: ".$phonenumber."\r\n";
    }
      
    if(isset($_POST['address'])) {
        $address = filter_var($_POST['address'], FILTER_SANITIZE_STRING);
        $email_body .= "Adres locatie: ".$address."\r\n";
    }

    if(isset($_POST['zipcode'])) {
        $zipcode = filter_var($_POST['zipcode'], FILTER_SANITIZE_STRING);
        $email_body .= "Postcode: ".$zipcode."\r\n";
    }
      
    if(isset($_POST['message'])) {
        $message = htmlspecialchars($_POST['message']);
        $email_body .= "Bericht: ".$message."\r\n";
    }

    $to = "example@email.com";
    $subject = "U heeft een nieuw bericht!";
    $message = $email_body;

    $header = "From:" . $from . "\r\n";
    $header .= 'MIME-Version: 1.0' . "\r\n";
    $header .= 'Content-type: text/html; charset=utf-8' . "\r\n";

    mail($to, $subject, $message);

?>

Possible Dupe: [new FormData() “application/x-www-form-urlencoded”](https://stackoverflow.com/questions/7542586/new-formdata-application-x-www-form-urlencoded) — Andreas, Jul 19 '21 at 13:41

score 0 · Accepted Answer · answered Jul 19 '21 at 13:49

0

Do not set the content type request header, firstly application/x-www-form-urlencoded is incorrect. FormData objects use multipart/form-data content type. Secondly, you cannot properly set this content type manually, if you leave it blank the browser will set it for you with the correct boundry.

answered Jul 19 '21 at 13:49

Musa

96,336
17
118
137

Well the only other thing I can think of is the lack of a submit button in the ajax, you'll have to show your php code to see if there is anything else that can cause the problem. – Musa Jul 19 '21 at 14:32
I just added it! – Maurice Markslag Jul 19 '21 at 14:36

Why does AJAX cause my form submission to be empty?

1 Answers1