AJAX form not submitting info to database

Question

I am trying to make a contact form with AJAX that will send data to my database. However nothing is being recorded. Can someone help me find the error I'm making?

HTML - this is the code for the actual form

<form method="POST">
                    <fieldset>
                        <label>First name:</label>
                        <input type="text" name="firstName" id="fNameInput" required/>
                        <label>Last name:</label>
                        <input type="text" name="lastName" id="lNameInput" required/>
                        <label>Email:</label>
                        <input type="email" name="email" id="emailInput" required/>
                    </fieldset>
                    <fieldset>
                        <label>Subject:</label>
                        <input type="text" name="subject" id="subjectInput" />
                        <label>Message:</label>
                        <textarea name="message" id="msgInput" ></textarea>
                    </fieldset>
                    <fieldset>
                    <fieldset>
                        <label>Your role:</label>
                        <input type="radio" name="role" value="writer" id="writerInput">Writer
                        <input type="radio" name="role" value="contributor" id="contribInput">Contributor
                        <input type="radio" name="role" value="administrator" id="adminInput">Administrator
                    </fieldset>
                    <input type="submit" value="Send" id="sendMsgBtn" />
                </form>

PHP - processing page (I don't think it's the processing page. It uploaded data to the db just fine before I tried updating my form to AJAX)

<?php

$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
$interest = $_POST['interest'];
$role = $_POST['role'];

$dsn = "mysql:host=localhost;dbname= ;charset=utf8mb4";
$dbusername = " ";
$dbpassword = " ";

$pdo = new PDO($dsn, $dbusername, $dbpassword);

$stmt = $pdo->prepare("INSERT INTO `contact` (`id`, `firstName`, `lastName`, `email`, `subject`, `message`, `interest`, `role`) VALUES (NULL, '$firstName', '$lastName', '$email', '$subject', '$message', '$interest', '$role'); ");

$stmt->execute();

?>

JS - script to submit content from database

var sendMsgBtn = document.getElementById("sendMsgBtn");
sendMsgBtn.addEventListener("click", addMsgFunction, false);

function addMsgFunction(e) {
    var myRequest = new XMLHttpRequest; 
    myRequest.onreadystatechange = function(){     

        if(myRequest.readyState === 4){        
            //console.log(myRequest.responseText);// modify or populate html elements based on response.
            var responseObj = JSON.parse(myRequest.responseText);
            console.log(responseObj.success);
        } 
};

var fNameInput = document.getElementById("fNameInput");
var lNameInput = document.getElementById("lNameInput");
var emailInput = document.getElementById("emailInput");
var subjectInput = document.getElementById("subjectInput");
var msgInput = document.getElementById("msgInput");
var techInput = document.getElementById("techInput");
var indInput = document.getElementById("indInput");
var desInput = document.getElementById("desInput");
var writerInput = document.getElementById("writerInput");
var contribInput = document.getElementById("contribInput");
var adminInput = document.getElementById("adminInput");

myRequest.open("POST", "process-contact.php", true); //true means it is asynchronous // Send urls through the url
myRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

myRequest.send("firstName=" + fNameInput.value+
    "&lastName=" + lNameInput.value+
    "&email=" + emailInput.value+
    "&subject=" + subjectInput.value+
    "&message=" + msgInput.value+
    "&interest=" + techInput.value+
    "&interest=" + indInput.value+
    "&interest=" + desInput.value+
    "&role=" + writerInput.value+
    "&role=" + contribInput.value+
    "&role=" + adminInput.value); 
}

Answer 1

How about using jquery.. Give your form id="myForm" and submit button id="submit" Dont forget to include jquery file in your head

 $(document).ready(function(){
    $("#submit").click(function(){
    $.ajax({
            type:"POST",
            url:'your/php_file/path',
            data:$("#myForm input").serialize(),
            success: function(response){
                console.log(response);  
            }
        });
    });
});