Input fields are empty after .submit jquery statement - php

Question

I'm trying to send data using an ajax call inside of a ('#form').submit call but all the inputs of the forms are empty when I didn't intend them to be. I thought it may of had something to do with the $(document).ready statement being in the incorrect location for things to work properly but I couldn't get it to work.
<script>
(function($){
$(document).ready( function() {
$("#success").hide();
$("#inval_email").hide();
$("#text_selection").on("change", function() {
var id = $("#text_selection option:selected").attr("value");
$("#inv_text").html($("#"+id).html());
});
$("#invitation_form").submit(function(e){
var email = $('#email').val();
var first_name = $('#first_name').val();
var last_name = $('#last_name').val();
var message_title = $('#message_title').val();
var article_title = $('#article_title').val();
var reference_location = $('#reference').val();
var inv_text = $('#inv_text').html();
var request;
alert(first_name);
e.preventDefault();
request = $.ajax({
type: 'POST',
url: BASE_URL+"wp-content/themes/Flatter/ajax/send_invite.php",
dataType: "text",
data: { first_name: first_name, last_name: last_name, email: email, message_title: message_title, article_title: article_title, reference_location: reference_location, inv_text: inv_text },
success: function(data){
console.log(data)
if(data=="true"){
$("#invitation").hide();
$("#success").show();
}
if(data=="false"){
$("#inval_email").show();
}
}
});
});
});
})(jQuery);
</script>
<div class="col-md-4">
<div id="success" hidden><br><br>Invitation sent successfully!</div>
<div id="invitation">
<br><br><br></br><h1>Invitation Form</h1>
<form id = "invitation_form">
First Name:<input id="first_name" type="text" name="first_name" required>
Last Name:<input id="last_name" type="text" name="last_name" required>
Email Address:<input id="email" type="text" name="email" required>
Message Title:<input id="message_title" type="text" name="message_title" required>
Article Title:<input id="article_title" type="text" name="article_title" required>
Reference Location:<input id="reference" type="text" name="reference" required>
Message:<textarea id="inv_text" style="resize: none" rows="10" placeholder="Select invitation type..." readonly required></textarea>
Invitation Type:
<select id="text_selection">
<option value="empty_field"></option>
<option value="community_inv_text">Community Invitation</option>
<option value="content_submission_inv" >Content Submission Invitation</option>
<option value="individual_inv">Individual Invitation</option>
<option value="content_submission_and_individual_inv">Content Submission and Individual Invitation</option>
<option value="contributor_content_submission_inv">Contributor Content Submission Invitation</option>
</select>
<input id="submit_inv" type="submit" value="Invite">
</form>
I would greatly appreciate some help in this matter. The point of this code is to collect information from the user and send the data to another file so it can be processed. Thanks for any help in advance.

Answer 1

I figured it out. There was a CSS file that was modifying elements under the same name as the ones I am using in my file (i.e. first_name, last_name, email, etc.).