I can not figure out what is wrong with my AJAX post. I do not understand. Yes, i have looked at the million other questions on here pertaining to AJAX but none of it is clear. I have copied a million different things. It keeps saying it is successfully submitted a new record but none of the variables get passed over.
Here is my form and code.
<form id="contactForm" method="POST" action="" name="contactForm">
<div class="contact-form">
<div class="form-group">
<input name="Name" type="Name" class="form-control" id="" placeholder="name">
</div>
<div class="row">
<div class="col-sm-6"> <div class="form-group">
<input name="Phone" type="Name" class="form-control" id="" placeholder="Phone"> </div>
</div>
<div class="col-sm-6"><div class="form-group">
<input name="Company" type="Name" class="form-control" id="" placeholder="Company">
</div> </div>
</div>
<div class="row">
<div class="col-sm-6"> <div class="form-group">
<input name="Website" type="Name" class="form-control" id="" placeholder="Website">
</div> </div>
<div class="col-sm-6"><div class="form-group">
<select class="form-control" name="Service">
<option>Social Ads</option>
<option>Social Management</option>
<option>Email Marketing</option>
<option>Influencer Marketing</option>
<option>SEO</option>
<option>Web Development</option>
<option>Brand Design</option>
<option>Traditional</option>
<option>Mobile</option>
<option>Combination</option>
</select></div>
</div>
</div>
<div class="form-group">
<textarea name="Message" cols="" class="form-control" placeholder="Message" rows="7"></textarea>
</div>
<!--<a href="#" type="submit" class="btn btn-primary">Submit <span class="icon_arrow"></span></a> <input class="btn btn-primary" type='submit' name='contactForm' value='Update' />-->
<button type="submit" name="contactForm" id="btn-submit" class="btn btn-primary">Submit<span class="icon_arrow"></span></button>
<div id="error_message" class="ajax_response" style="">hello</div>
<div id="success_message" class="ajax_response" style=""><p>hello!</p></div>
</form>
</div>
</section>
<script>
$("#contactForm").submit(function(e) {
e.preventDefault();
var Name = $("#Name").val();
var Phone = $("#Phone").val();
var Company = $("#Company").val();
var Website = $("#Website").val();
var Service = $("#Service").val();
var Message = $("#Message").val();
var myData ={"Name":Name, "Phone":Phone, "Company":Company, "Website":Website, "Service":Service, "Message":Message}
if(Name == "" || Phone == "" || Company == "" || Website == "" || Service == "" || Message == "" ) {
$("#error_message").show().html("All Fields are Required");
} else {
$("#error_message").html("").hide();
$.ajax({
type: "POST",
url: "submitAjax.php",
data: myData,
success: function(data){
$('#success_message').fadeIn().html(data);
setTimeout(function() {
$('#success_message').fadeOut("slow");
}, 2000 );
}
});
}
})
</script>
submitAjax CODE BELOW HERE
<?php include_once("includes/common.php") ?>
<?php
$Name = $_POST['Name'];
$Phone = $_POST['Phone'];
$Company = $_POST['Company'];
$Website = $_POST['Website'];
$Service = $_POST['Service'];
$Message = $_POST['Message'];
$sql = "INSERT INTO contacts (firstName, phone_num, company, website, message, service) VALUES ('".$Name."', '".$Phone."', '".$Company."', '".$Website."', '".$Message."', '".$Service."' )";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
</div>